/* =============================================================================
   Traveto Design System — Tokens (Cartograph v1.0)
   Source of truth: docs/design-system.md
   DO NOT ADD TOKENS WITHOUT UPDATING THE GUIDE.
   ============================================================================= */

:root {
  /* ---------- Color: Paper / Ink (Neutrals) ---------- */
  --paper:      #F5F2ED;
  --paper-2:    #EDE8DF;
  --paper-3:    #E3DDD0;

  --ink:        #1A2630;
  --ink-2:      #2A3842;
  --ink-3:      #4A5862;
  --ink-4:      #6E7A82;

  --stone:      #9C9789;
  --stone-2:    #C9C3B5;
  --stone-3:    #E0DBCE;

  /* ---------- Color: Accents ---------- */
  --forest:         #4A5D3A;
  --forest-2:       #5F7549;
  --forest-subtle:  rgba(74, 93, 58, 0.10);
  --forest-line:    rgba(74, 93, 58, 0.35);

  --ochre:          #B8733F;
  --ochre-2:        #D08847;
  --ochre-subtle:   rgba(184, 115, 63, 0.12);
  --ochre-line:     rgba(184, 115, 63, 0.35);

  --water:          #2E5868;
  --water-2:        #3E6F80;
  --water-subtle:   rgba(46, 88, 104, 0.10);
  --water-line:     rgba(46, 88, 104, 0.32);

  /* ---------- Color: Status ---------- */
  --trail:          #9B3C2D;
  --trail-subtle:   rgba(155, 60, 45, 0.10);

  --meadow:         #6B8A4A;
  --meadow-subtle:  rgba(107, 138, 74, 0.12);

  --dust:           #A67C1E;
  --dust-subtle:    rgba(166, 124, 30, 0.12);

  /* ---------- Semantic — Light Mode (Default for marketing/docs/mail) ---------- */
  --bg:             var(--paper);
  --bg-surface:     #FFFFFF;
  --bg-elevated:    var(--paper-2);
  --bg-sunken:      var(--paper-3);

  --text:           var(--ink);
  --text-secondary: var(--ink-3);
  --text-muted:     var(--ink-4);
  --text-inverse:   var(--paper);

  --line:           var(--stone-2);
  --line-strong:    var(--stone);
  --line-subtle:    var(--stone-3);

  --action:         var(--forest);
  --action-hover:   var(--forest-2);
  --action-text:    var(--paper);

  --accent-warm:    var(--ochre);
  --accent-cool:    var(--water);

  /* ---------- Typography ---------- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --fs-display-xl: clamp(3rem,  7vw + 1rem, 5rem);      /* 48–80px */
  --fs-display-l:  clamp(2.25rem, 4.5vw + 0.75rem, 3.5rem); /* 36–56px */
  --fs-display-m:  clamp(1.75rem, 3vw + 0.75rem, 2.5rem);   /* 28–40px */
  --fs-h1:         2rem;      /* 32 */
  --fs-h2:         1.5rem;    /* 24 */
  --fs-h3:         1.25rem;   /* 20 */
  --fs-body-l:     1.125rem;  /* 18 */
  --fs-body:       1rem;      /* 16 */
  --fs-body-s:     0.875rem;  /* 14 */
  --fs-micro:      0.75rem;   /* 12 */
  --fs-mono:       0.8125rem; /* 13 */
  --fs-eyebrow:    0.75rem;   /* 12 */

  --lh-tight:    0.98;
  --lh-snug:     1.15;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  --ls-tight:    -0.03em;
  --ls-snug:     -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-eyebrow:  0.18em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;

  /* ---------- Spacing (8-pt grid, plus 4-pt for micro) ---------- */
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  --section-pad-y: clamp(4.5rem, 10vw, 8rem);

  /* ---------- Layout ---------- */
  --container-max:  80rem;               /* 1280 */
  --container-pad:  clamp(1rem, 4vw, 2.5rem);
  --prose-max:      62ch;
  --nav-h:          4.5rem;              /* 72 marketing */
  --nav-h-app:      3rem;                /* 48 app */

  /* ---------- Radii ---------- */
  --radius-0:     0;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-pill:  999px;

  /* ---------- Borders ---------- */
  --border-hairline: 1px solid var(--line);
  --border-strong:   1px solid var(--line-strong);

  /* ---------- Shadows (light-mode only; dark-mode uses borders) ---------- */
  --shadow-sm: 0 1px 2px rgba(26, 38, 48, 0.06);
  --shadow-md: 0 4px 16px rgba(26, 38, 48, 0.08), 0 1px 2px rgba(26, 38, 48, 0.04);
  --shadow-lg: 0 16px 48px -12px rgba(26, 38, 48, 0.18);

  /* ---------- Motion ---------- */
  --dur-fast:     120ms;
  --dur-base:     220ms;
  --dur-slow:     400ms;
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:       cubic-bezier(0.55, 0, 0.85, 0);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Focus ---------- */
  --focus-ring:       0 0 0 3px var(--forest-subtle);
  --focus-outline:    2px solid var(--forest-2);
  --focus-offset:     2px;

  /* ---------- Z-index scale ---------- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   1100;
}

/* =============================================================================
   Dark Mode — App default. Activated via [data-theme="dark"] on <html>
   (or :root in app context). Marketing never opts in.
   ============================================================================= */

[data-theme="dark"],
:root[data-theme="dark"] {
  --bg:             var(--ink);
  --bg-surface:     var(--ink-2);
  --bg-elevated:    #34424C;   /* ink + ~10% */
  --bg-sunken:      #14202A;

  --text:           var(--paper);
  --text-secondary: #B8B3A6;
  --text-muted:     var(--ink-4);
  --text-inverse:   var(--ink);

  --line:           rgba(156, 151, 137, 0.18);
  --line-strong:    rgba(156, 151, 137, 0.32);
  --line-subtle:    rgba(156, 151, 137, 0.10);

  --action:         var(--forest-2);
  --action-hover:   #6E8653;
  --action-text:    var(--paper);

  --shadow-sm: none;
  --shadow-md: 0 0 0 1px rgba(156, 151, 137, 0.12);
  --shadow-lg: 0 0 0 1px rgba(156, 151, 137, 0.16);

  --focus-ring: 0 0 0 3px rgba(95, 117, 73, 0.35);
}

/* =============================================================================
   Prefers-reduced-motion: kill all transitions/animations.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}