/* ============================================================================
   MAITRI DESIGN TOKENS  ·  v0.1
   The single source of truth for Maitri's calm, warm, trustworthy concierge UI.
   Aesthetic: warm paper canvas · calm teal · coral joy · humanist + soft serif.
   Consume these variables — never hard-code raw values in product code.
   ========================================================================= */

:root {
  /* ---- 1. PRIMITIVE COLOR ------------------------------------------------ */
  /* Warm neutrals (the "paper" the concierge lives on) */
  --paper-0:   #FFFFFF;   /* pure white — raised cards            */
  --paper-50:  #FFFDFB;   /* warm white                          */
  --paper-100: #FBF8F4;   /* canvas (default background)         */
  --paper-200: #F4EEE6;   /* sunken / inset surfaces             */
  --paper-300: #ECE4D8;   /* subtle fills                        */

  /* Warm ink (text) — never pure black; keeps the UI soft */
  --ink-900: #211C16;     /* primary text / headings             */
  --ink-700: #5A5248;     /* secondary text                      */
  --ink-600: #6B6358;     /* tertiary TEXT — AA (~5.4:1 on paper) */
  --ink-500: #938A7E;     /* non-text: placeholder / icon hints  */
  --ink-300: #C3BAAD;     /* disabled                            */

  /* Hairlines */
  --line:        #E9E1D6;
  --line-strong: #D9CFC1;

  /* Teal — "Calm": trust, focus, the primary action color */
  --teal-50:  #E7F2F0;
  --teal-100: #CBE6E1;
  --teal-200: #A6D5CC;
  --teal-300: #7FC0B5;
  --teal-400: #4FA396;
  --teal-500: #2E8B7F;    /* brand base (use for fills w/ care)  */
  --teal-600: #1F7A6E;    /* interactive fill (AA w/ white text) */
  --teal-700: #1C5A53;    /* text & links on light (AA on paper) */
  --teal-800: #143F3A;

  /* Coral — "Joy": warmth, delight, accents (NOT a white-text button) */
  --coral-50:  #FDEEE6;
  --coral-100: #FAD9C8;
  --coral-200: #F5BBA0;
  --coral-300: #F0A07E;
  --coral-400: #EA8A62;
  --coral-500: #E0744A;
  --coral-600: #C75E38;   /* coral accent / icon                 */
  --coral-700: #A8492A;   /* coral TEXT on coral-50 tint (AA 5:1) */

  /* Gold — sparing delight / celebration moments only */
  --gold-300: #F0CE7A;
  --gold-500: #E3B24A;
  --gold-600: #B98A22;    /* gold text on light (AA)             */

  /* Semantic */
  --success-500: #2F9E6F;  --success-700: #1E6E4C;  --success-bg: #E4F4EC;  --success-border: #B8E3CC;
  --warning-500: #D9991F;  --warning-700: #8A6010;  --warning-bg: #FBEFD6;  --warning-border: #EBD49A;
  --danger-500:  #C7503C;  --danger-700:  #93331F;  --danger-bg:  #FBE6E1;
  --info-500:    #3E7CB1;  --info-700:    #285684;  --info-bg:    #E6EFF6;

  /* ---- 2. SEMANTIC COLOR ROLES (use these in components) ----------------- */
  --color-bg:            var(--paper-100);
  --color-bg-sunken:     var(--paper-200);
  --color-surface:       var(--paper-0);
  --color-surface-warm:  var(--paper-50);
  --color-overlay-scrim: rgba(33, 28, 22, 0.32);
  --color-inverse:       var(--ink-900);   /* a strong surface (user bubbles, toasts) */
  --color-on-inverse:    #FFFFFF;           /* night theme flips this pair, not --ink-900 */

  --color-text:          var(--ink-900);
  --color-text-muted:    var(--ink-700);
  --color-text-subtle:   var(--ink-600);   /* AA-compliant for small text */
  --color-text-hint:     var(--ink-500);   /* non-text / decorative only  */
  --color-text-disabled: var(--ink-300);
  --color-on-accent:     #FFFFFF;

  --color-border:        var(--line);
  --color-border-strong: var(--line-strong);

  --color-primary:        var(--teal-600);
  --color-primary-hover:  var(--teal-700);
  --color-primary-text:   var(--teal-700);   /* links, primary text accents */
  --color-primary-soft:   var(--teal-50);     /* tonal button / chip bg      */
  --color-on-primary:     #FFFFFF;

  --color-accent:         var(--coral-500);
  --color-accent-text:    var(--coral-600);
  --color-accent-soft:    var(--coral-50);

  --color-focus:          var(--teal-500);
  --color-focus-ring:     rgba(46, 139, 127, 0.32);

  /* Maitri "presence" — the assistant's living signature. Use ONLY for Maitri's
     own voice: the orb, streaming responses, proactive aura. Never for chrome. */
  --maitri-aura:      linear-gradient(135deg, #2E8B7F 0%, #5BC3B0 52%, #8FD6C2 100%);
  --maitri-aura-soft: linear-gradient(135deg, rgba(46,139,127,0.16), rgba(143,214,194,0.10));
  --maitri-glow:      0 0 0 6px rgba(46,139,127,0.10), 0 10px 34px rgba(46,139,127,0.22);

  /* Logo-theme marks (constellation / boxes). Built on the brand primary so they
     follow the active palette and day/night. Reuse --maitri-aura/--maitri-glow for
     the soft halo (see logo.css). Night overrides in tokens-night.css. */
  --logo-node:        var(--teal-600);          /* outer nodes / tile dots     */
  --logo-link:        rgba(31,122,110,0.85);    /* resting links / tile stroke */
  --logo-link-bright: var(--teal-500);          /* forming + flowing links     */
  --logo-core:        var(--teal-500);          /* central lens / core         */
  --logo-mote:        #2E8B7F;                  /* traveling glow mote         */
  --logo-glow:        rgba(46,139,127,0.45);    /* drop-shadow glow color      */
  --logo-tile:        var(--color-surface);     /* app-tile fill (reads a card)*/

  /* ---- 3. TYPOGRAPHY ----------------------------------------------------- */
  /* Display: a refined, warm literary serif (clean letterforms, lovely italic).
     Swap-in alternates: "Spectral", "Source Serif 4", "Libre Caslon Display". */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* User text-size lever (set by the floating control / localStorage). 1 = default.
     --text-scale drives body/title/caption/etc.; display & headings use a DAMPED
     factor so large text doesn't blow out the layout. At scale=1 both = 1, so the
     fluid clamp() sizing below is byte-for-byte identical to the un-scaled ramp. */
  --text-scale: 1;
  --text-scale-lg: calc(1 + (var(--text-scale) - 1) * 0.6);

  /* Fluid type scale (360px → 1440px). Display uses --font-display.
     Each clamp() is multiplied by the (damped for display/h*) text-scale lever. */
  --fs-display: calc(clamp(2.75rem, 1.75rem + 4.4vw, 4.5rem) * var(--text-scale-lg));
  --fs-h1:      calc(clamp(2rem, 1.5rem + 2.2vw, 3rem) * var(--text-scale-lg));
  --fs-h2:      calc(clamp(1.5rem, 1.22rem + 1.25vw, 2.125rem) * var(--text-scale-lg));
  --fs-h3:      calc(clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem) * var(--text-scale-lg));
  --fs-title:   calc(1.125rem * var(--text-scale));
  --fs-body-lg: calc(1.125rem * var(--text-scale));
  --fs-body:    calc(1rem * var(--text-scale));
  --fs-body-sm: calc(0.9375rem * var(--text-scale));
  --fs-caption: calc(0.8125rem * var(--text-scale));
  --fs-eyebrow: calc(0.75rem * var(--text-scale));   /* uppercase, tracked — section labels */
  --fs-micro:   calc(0.6875rem * var(--text-scale)); /* sub-eyebrow: flags, legends, axis ticks */

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.45;
  --lh-relaxed: 1.62;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-eyebrow:  0.14em;

  /* ---- 4. SPACING (8pt base, 4pt half-steps) ----------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */

  /* ---- 5. RADIUS (rounded, friendly geometry) ---------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---- 6. ELEVATION (soft, warm-tinted — used sparingly) ----------------- */
  --shadow-1: 0 1px 2px rgba(33,28,22,0.04), 0 1px 3px rgba(33,28,22,0.05);
  --shadow-2: 0 2px 6px rgba(33,28,22,0.05), 0 6px 16px rgba(33,28,22,0.06);
  --shadow-3: 0 4px 12px rgba(33,28,22,0.06), 0 14px 34px rgba(33,28,22,0.08);
  --shadow-4: 0 8px 24px rgba(33,28,22,0.08), 0 28px 60px rgba(33,28,22,0.10);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* ---- 7. MOTION (gentle, breathing) ------------------------------------- */
  --ease-standard:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.45, 0, 0.2, 1);
  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
  --dur-ambient: 720ms;   /* proactive surfaces / orb breathing */

  /* ---- 8. LAYOUT --------------------------------------------------------- */
  --container:  1360px;   /* standard page width — wider, less side whitespace */
  --measure:    68ch;     /* ideal reading width (prose blocks only) */
  --gutter:     var(--space-6);

  /* ---- 9. Z-INDEX -------------------------------------------------------- */
  --z-base: 0; --z-raised: 10; --z-sticky: 100;
  --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; --z-max: 9999;
}

/* Breakpoints (reference — use in @media):
   xs 360 · sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1440 */

/* Honor user intent: calm tech never fights the system. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms;
          --dur-slow: 0ms; --dur-ambient: 0ms; }
}