/* LEANTA — Design Tokens (P2 · Loop 2). Warm shell × cold core.
   Light = :root · Dark = [data-theme="dark"]. WCAG AA verified — see visual-identity.md §1. */

:root {
  /* — Warm neutrals — */
  --color-linen-50:    #F2ECDF;  /* page base (light) */
  --color-linen-100:   #FAF6EC;  /* card / raised surface */
  --color-linen-300:   #C9C0AE;  /* secondary text (dark mode) */
  --color-espresso-950:#211C16;  /* page base (dark) */
  --color-espresso-900:#2B251D;  /* primary text (light) · card (dark)   12.9:1 */
  --color-espresso-800:#3A3328;  /* secondary text (light)               10.6:1 */
  --color-stone-600:   #6B6357;  /* muted text (light) · hairlines        5.0:1 */
  --color-stone-400:   #9A9081;  /* muted text (dark)                     5.4:1 */

  /* — Accents — */
  --color-signal-600:  #0B7A4B;  /* precision/data accent (light)  4.6:1 / white-on-it 5.4:1 */
  --color-signal-400:  #2FBE82;  /* precision accent (dark)        7.1:1 */
  --color-gold-400:    #EAC668;  /* CTA fill / highlight — NOT text on linen (espresso text 9.2:1) */
  --color-gold-600:    #6E5A36;  /* gold AS text on linen          5.6:1 */
  --color-terra-600:   #9E4E2E;  /* terracotta — hospitality only  5.0:1 */
  --color-terra-400:   #C9714B;  /* terracotta (dark)              4.8:1 */

  /* — Semantic — */
  --color-success: var(--color-signal-600);
  --color-warning: #8A5A0C;   /* 5.9:1 */
  --color-danger:  #C8362F;   /* 5.2:1 */
  --color-info:    #1F6FEB;

  /* — Role aliases (use these in components) — */
  --color-bg:            var(--color-linen-50);
  --color-surface:       var(--color-linen-100);
  --color-text:          var(--color-espresso-900);
  --color-text-secondary:var(--color-espresso-800);
  --color-text-muted:    var(--color-stone-600);
  --color-border:        var(--color-stone-600);
  --color-accent:        var(--color-signal-600);  /* data/precision */
  --color-cta:           var(--color-gold-400);     /* act/warmth */
  --color-cta-on:        var(--color-espresso-900);
  --color-line:          var(--color-stone-600);
  --color-focus:         var(--color-signal-600);

  /* — Type — */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --text-xs:  0.625rem;   /* 10px */
  --text-sm:  0.75rem;    /* 12px */
  --text-base:1rem;       /* 16px */
  --text-md:  1.25rem;    /* 20px */
  --text-lg:  1.5625rem;  /* 25px */
  --text-xl:  1.9375rem;  /* 31px */
  --text-2xl: 2.4375rem;  /* 39px */
  --text-3xl: 3.0625rem;  /* 49px */
  --text-4xl: 3.8125rem;  /* 61px */
  --text-5xl: 4.75rem;    /* 76px */
  --text-hero: clamp(2.5rem, 1.2rem + 5vw, 4.75rem);

  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-display:1.1; --lh-heading:1.25; --lh-body:1.6; --lh-mono:1.5;
  --tracking-display:-0.02em; --tracking-heading:-0.01em; --tracking-logo:0.12em;

  /* — Spacing (4px base) — */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  /* — Radius — */
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px;

  /* — Grid — */
  --grid-cols:12; --grid-gutter:24px; --content-max:1280px;
  --pad-desktop:80px; --pad-mobile:24px;

  /* — Continuous line — */
  --line-stroke:1.5px;

  /* — Glass — */
  --glass-blur:12px;
  --glass-bg:rgba(250,246,236,0.72);
  --glass-border:1px solid rgba(107,99,87,0.20);
  --glass-shadow:0 8px 32px rgba(43,37,29,0.08);

  /* — Motion — */
  --dur-fast:120ms; --dur-base:220ms; --dur-slow:420ms; --dur-line:1200ms;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}

[data-theme="dark"] {
  --color-bg:            var(--color-espresso-950);
  --color-surface:       var(--color-espresso-900);
  --color-text:          var(--color-linen-50);
  --color-text-secondary:var(--color-linen-300);
  --color-text-muted:    var(--color-stone-400);
  --color-border:        var(--color-stone-400);
  --color-accent:        var(--color-signal-400);
  --color-cta:           var(--color-gold-400);
  --color-cta-on:        var(--color-espresso-900);
  --color-line:          var(--color-stone-400);
  --color-focus:         var(--color-signal-400);

  --color-success: var(--color-signal-400);
  --color-warning: #E0A93B;
  --color-danger:  #F1746B;
  --color-info:    #5C9DFF;

  --glass-bg:rgba(43,37,29,0.60);
  --glass-border:1px solid rgba(242,236,223,0.12);
  --glass-shadow:0 8px 32px rgba(0,0,0,0.40);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast:1ms; --dur-base:1ms; --dur-slow:1ms; --dur-line:1ms; }
}