/* ============================================================
   Cowork UI Kit — Design Tokens
   2 aesthetic systems: WARM (P1 Terracotta Sand) + DARK (P4 Graphite Aurora)
   v0.3 — 2026-05-19
   ============================================================ */

:root {
  /* --- WARM · P1 Terracotta Sand ---------------------------- */
  --w-base:        #FAF6EE;  /* page background cream */
  --w-surface:     #FDFAF3;  /* card surface (lighter) */
  --w-surface-2:   #F5F2EA;  /* page accent / linen */
  --w-border:      #E8E2D3;  /* card border subtle */
  --w-rule:        #D9D2C0;  /* horizontal rule, divider */

  --w-ink:         #2D2E2A;  /* primary text */
  --w-ink-2:       #5A5B55;  /* secondary text */
  --w-ink-3:       #8C8D87;  /* muted text */

  --w-coral:       #C97464;  /* primary action (button fill) */
  --w-coral-deep:  #B5604F;  /* text on cream, link accent */
  --w-coral-soft:  #F4D6CE;  /* soft coral tint (badge bg) */
  --w-sage:        #5E7355;  /* success, completed */
  --w-sage-light:  #859F7C;  /* sage accent */
  --w-amber:       #D4A574;  /* warmth touches */
  --w-rose:        #E8B4A8;  /* soft pink accent */
  --w-peach:       #F4B89C;  /* peach soft */

  /* --- DARK · P4 Graphite Aurora ---------------------------- */
  --d-base:        #0A0A12;  /* page background near-black */
  --d-surface:     #12121A;  /* card surface */
  --d-surface-2:   #1A1A24;  /* nested surface */
  --d-sidebar:     #0E0E16;  /* sidebar bg (slightly darker than base) */
  --d-border:      #2A2A36;  /* card border */
  --d-border-soft: #1F1F2A;  /* subtle border */

  --d-text:        #E5E7EB;  /* primary text */
  --d-text-2:      #94A3B8;  /* secondary text */
  --d-text-3:      #64748B;  /* muted text */

  --d-violet:      #7C5CFF;  /* primary action (button fill) */
  --d-cyan:        #22D3EE;  /* info, links */
  --d-emerald:     #10B981;  /* success, positive delta */
  --d-amber:       #F59E0B;  /* warning, in-progress */
  --d-danger:      #EF4444;  /* error, refund */

  /* --- Typography scale (shared) ---------------------------- */
  --fs-xs:    12px;   /* labels, captions — WCAG min */
  --fs-sm:    14px;   /* secondary text, table dense */
  --fs-base:  16px;   /* body text */
  --fs-lg:    18px;   /* body large, article reading */
  --fs-xl:    20px;
  --fs-2xl:   24px;   /* h3 */
  --fs-3xl:   30px;   /* h2 */
  --fs-4xl:   36px;
  --fs-5xl:   48px;   /* h1 */
  --fs-6xl:   60px;
  --fs-7xl:   72px;
  --fs-8xl:   96px;   /* hero display */
  --fs-9xl:   128px;  /* slide big number */

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;
  --lh-loose:    1.75;  /* article body serif */

  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;  /* uppercase labels mono */

  /* --- Font families --------------------------------------- */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-serif:   'Lora', 'Fraunces', Georgia, serif;
  --font-serif-heavy: 'Fraunces', 'Lora', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* --- Spacing scale (4px base) ---------------------------- */
  --sp-0:    0;
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-8:    32px;
  --sp-10:   40px;
  --sp-12:   48px;
  --sp-16:   64px;
  --sp-20:   80px;
  --sp-24:   96px;
  --sp-32:   128px;

  /* --- Radius ---------------------------------------------- */
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    16px;
  --r-2xl:   24px;   /* card default warm */
  --r-3xl:   32px;   /* hero, large cards */
  --r-full:  9999px;

  /* --- Shadow (warm = soft, dark = glow) ------------------- */
  --shadow-xs:  0 1px 2px rgba(45, 46, 42, 0.04);
  --shadow-sm:  0 2px 4px rgba(45, 46, 42, 0.05), 0 1px 2px rgba(45, 46, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(45, 46, 42, 0.06), 0 2px 4px rgba(45, 46, 42, 0.04);
  --shadow-lg:  0 8px 24px rgba(45, 46, 42, 0.08), 0 4px 8px rgba(45, 46, 42, 0.04);
  --shadow-xl:  0 16px 48px rgba(45, 46, 42, 0.10), 0 6px 16px rgba(45, 46, 42, 0.06);
  --shadow-2xl: 0 24px 64px rgba(45, 46, 42, 0.14), 0 8px 24px rgba(45, 46, 42, 0.08);

  --glow-violet:  0 0 0 1px rgba(124, 92, 255, 0.4), 0 6px 20px rgba(124, 92, 255, 0.3);
  --glow-emerald: 0 0 0 1px rgba(16, 185, 129, 0.4), 0 6px 20px rgba(16, 185, 129, 0.3);
  --glow-cyan:    0 0 0 1px rgba(34, 211, 238, 0.4), 0 6px 20px rgba(34, 211, 238, 0.3);

  /* --- Motion ---------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
  --dur-slower:  600ms;

  /* --- Z-index --------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 30;
  --z-sticky:  40;
  --z-fixed:   50;
  --z-overlay: 60;
  --z-modal:   70;
  --z-toast:   80;
  --z-tooltip: 90;

  /* --- Breakpoints ----------------------------------------- */
  /* sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536 */
}

/* ============================================================
   Mesh backgrounds — copy-paste utilities
   ============================================================ */

.mesh-warm {
  background-color: var(--w-base);
  background-image:
    radial-gradient(at 8% 12%, hsla(18, 90%, 78%, 0.55) 0px, transparent 50%),
    radial-gradient(at 88% 8%, hsla(340, 70%, 82%, 0.5) 0px, transparent 50%),
    radial-gradient(at 92% 72%, hsla(35, 85%, 75%, 0.5) 0px, transparent 50%),
    radial-gradient(at 12% 88%, hsla(120, 30%, 78%, 0.45) 0px, transparent 50%);
}

.mesh-warm-subtle {
  background-color: var(--w-base);
  background-image:
    radial-gradient(at 8% 12%, hsla(18, 90%, 78%, 0.25) 0px, transparent 50%),
    radial-gradient(at 92% 88%, hsla(35, 85%, 75%, 0.25) 0px, transparent 50%);
}

.mesh-dark {
  background-color: var(--d-base);
  background-image:
    radial-gradient(at 15% 22%, hsla(265, 85%, 55%, 0.32) 0px, transparent 50%),
    radial-gradient(at 78% 18%, hsla(195, 92%, 55%, 0.22) 0px, transparent 50%),
    radial-gradient(at 88% 78%, hsla(155, 88%, 50%, 0.18) 0px, transparent 50%),
    radial-gradient(at 20% 85%, hsla(280, 80%, 45%, 0.22) 0px, transparent 50%);
}

.mesh-dark-subtle {
  background-color: var(--d-base);
  background-image:
    radial-gradient(at 15% 22%, hsla(265, 85%, 55%, 0.15) 0px, transparent 50%),
    radial-gradient(at 85% 78%, hsla(155, 88%, 50%, 0.10) 0px, transparent 50%);
}

.grid-lines-dark {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 40px 40px;
}

.tab-num { font-variant-numeric: tabular-nums; }