/* ============================================================
   ANTARATMA — DESIGN TOKENS
   Single source of truth. Change here, changes everywhere.
   ============================================================ */

:root {
  /* ---- COLOR: raw palette ---- */
  --c-ivory-50:    #FBF9F4;
  --c-ivory-100:   #F5F1E8;
  --c-parchment:   #EDE6D8;
  --c-sand:        #DCD2BE;
  --c-stone:       #B9AE9A;
  --c-clay:        #8A7F6B;
  --c-earth:       #5C5346;
  --c-charcoal:    #2A2724;
  --c-obsidian:    #14120F;
  --c-void:        #0A0908;

  --c-bronze:      #9A7B4F;
  --c-bronze-lit:  #C4A06A;
  --c-saffron:     #C8873C;
  --c-ember:       #A85D2E;

  /* ---- COLOR: semantic (light surface, default) ---- */
  --bg:            var(--c-ivory-50);
  --bg-raised:     #FFFFFF;
  --bg-sunken:     var(--c-ivory-100);
  --bg-inverse:    var(--c-obsidian);

  --ink:           var(--c-obsidian);
  --ink-muted:     var(--c-earth);
  --ink-faint:     var(--c-clay);
  --ink-inverse:   var(--c-ivory-100);

  --rule:          rgba(20, 18, 15, 0.12);
  --rule-strong:   rgba(20, 18, 15, 0.28);

  --accent:        var(--c-bronze);
  --accent-hover:  var(--c-saffron);
  --accent-ink:    var(--c-ivory-50);

  --focus-ring:    var(--c-saffron);

  /* ---- TYPE: families ---- */
  --font-display:  "Canela", "Editorial New", "Freight Display", ui-serif,
                   Georgia, "Times New Roman", serif;
  --font-serif:    "Lyon Text", "Source Serif 4", ui-serif, Georgia, serif;
  --font-sans:     "Suisse Intl", "Inter", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:     "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- TYPE: fluid scale (clamp: min / preferred / max) ---- */
  --t-2xs:   0.6875rem;
  --t-xs:    0.75rem;
  --t-sm:    0.8125rem;
  --t-base:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-md:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-lg:    clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --t-xl:    clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --t-2xl:   clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --t-3xl:   clamp(2.75rem, 1.7rem + 5vw, 6rem);
  --t-4xl:   clamp(3.25rem, 1.6rem + 8vw, 9rem);

  /* ---- TYPE: metrics ---- */
  --lh-tight:    1.02;
  --lh-snug:     1.14;
  --lh-normal:   1.45;
  --lh-reading:  1.68;
  --lh-loose:    1.85;

  --ls-tightest: -0.045em;
  --ls-tighter:  -0.03em;
  --ls-tight:    -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-widest:   0.2em;

  --w-light:     300;
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;

  /* ---- SPACE: 4px base, geometric ---- */
  --s-1:   0.25rem;
  --s-2:   0.5rem;
  --s-3:   0.75rem;
  --s-4:   1rem;
  --s-5:   1.5rem;
  --s-6:   2rem;
  --s-7:   3rem;
  --s-8:   4rem;
  --s-9:   6rem;
  --s-10:  8rem;
  --s-11:  12rem;
  --s-12:  16rem;

  /* section rhythm — fluid */
  --section-y:      clamp(4rem, 9vw, 11rem);
  --section-y-lg:   clamp(6rem, 14vw, 17rem);
  --gutter:         clamp(1.25rem, 4vw, 3.5rem);

  /* ---- LAYOUT ---- */
  --container:        88rem;   /* 1408px */
  --container-text:   42rem;   /* 672px — optimal measure */
  --container-wide:   104rem;
  --measure:          68ch;

  /* ---- RADIUS ---- */
  --r-none:  0;
  --r-sm:    2px;
  --r-md:    4px;
  --r-lg:    10px;
  --r-full:  999px;

  /* ---- ELEVATION (soft, warm-tinted — never gray) ---- */
  --sh-sm:  0 1px 2px rgba(42, 39, 36, 0.04),
            0 2px 8px rgba(42, 39, 36, 0.03);
  --sh-md:  0 2px 6px rgba(42, 39, 36, 0.05),
            0 12px 32px rgba(42, 39, 36, 0.06);
  --sh-lg:  0 4px 12px rgba(42, 39, 36, 0.06),
            0 28px 64px rgba(42, 39, 36, 0.09);

  /* ---- MOTION ---- */
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --e-soft:   cubic-bezier(0.4, 0, 0.2, 1);

  --d-fast:   180ms;
  --d-base:   340ms;
  --d-slow:   680ms;
  --d-vslow:  1200ms;

  /* ---- Z ---- */
  --z-canvas:  0;
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 500;
  --z-modal:   600;

  --header-h:  clamp(4.5rem, 6vw, 5.75rem);
}

/* ============================================================
   DARK SURFACE — opt-in per section via [data-surface="dark"]
   Not a theme toggle: an editorial device. Sections invert.
   ============================================================ */
[data-surface="dark"] {
  --bg:          var(--c-obsidian);
  --bg-raised:   #1C1915;
  --bg-sunken:   var(--c-void);
  --bg-inverse:  var(--c-ivory-50);

  --ink:         var(--c-ivory-100);
  --ink-muted:   var(--c-stone);
  --ink-faint:   var(--c-clay);
  --ink-inverse: var(--c-obsidian);

  --rule:        rgba(245, 241, 232, 0.14);
  --rule-strong: rgba(245, 241, 232, 0.3);

  --accent:      var(--c-bronze-lit);
  --accent-hover:var(--c-saffron);
  --accent-ink:  var(--c-obsidian);

  --sh-sm: none;
  --sh-md: 0 12px 40px rgba(0, 0, 0, 0.4);
  --sh-lg: 0 28px 80px rgba(0, 0, 0, 0.55);
}

[data-surface="warm"] {
  --bg:        var(--c-parchment);
  --bg-raised: var(--c-ivory-50);
  --bg-sunken: var(--c-sand);
}

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-vslow: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}