/* ============================================================
   Horsiq — Design Tokens
   Single source of truth for colors, type, spacing, motion.
   ============================================================ */

:root {
  /* ---------- Color ----------
     Paper-based palette. Warm off-white background,
     near-black foreground. Minimal accents.
  */
  --color-paper:        #F4EFE6;  /* primary bg — warm off-white */
  --color-paper-warm:   #EBE4D6;  /* deeper paper tone for sections */
  --color-paper-cool:   #FAF6EE;  /* lightest paper for cards on bg */
  --color-ink:          #0A0A0A;  /* primary text — near black */
  --color-ink-soft:     #2A2A28;  /* body text, slightly warmer */
  --color-ink-muted:    #6B6B66;  /* secondary text, captions */
  --color-ink-faint:    #B5B0A5;  /* dividers, placeholders */
  --color-accent:       #1A1A1A;  /* reserved for inverted CTAs */

  /* Inverted surface (dark sections, CTA bands) */
  --color-dark:         #0E0D0B;  /* near-black with warm tint */
  --color-dark-paper:   #F4EFE6;  /* foreground on dark */

  /* Functional */
  --color-link:         var(--color-ink);
  --color-link-hover:   var(--color-ink-muted);
  --color-focus:        #1A1A1A;
  --color-error:        #8A2A1F;
  --color-success:      #2A5A3D;

  /* ---------- Typography ----------
     Fraunces (serif display) + Inter (sans body).
     Self-hosted woff2, see /assets/fonts.
  */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — fluid clamp() values */
  --text-display-xl: clamp(64px, 12vw, 200px);
  --text-display-lg: clamp(48px, 8vw,  140px);
  --text-display-md: clamp(40px, 5vw,  88px);
  --text-h1:         clamp(40px, 4.5vw, 72px);
  --text-h2:         clamp(32px, 3.2vw, 52px);
  --text-h3:         clamp(24px, 2.2vw, 36px);
  --text-h4:         clamp(20px, 1.6vw, 26px);
  --text-lead:       clamp(18px, 1.4vw, 22px);
  --text-body:       clamp(16px, 1.1vw, 18px);
  --text-small:      14px;
  --text-caption:    12px;

  /* Line heights */
  --lh-tight:    0.95;
  --lh-display:  1.05;
  --lh-heading:  1.15;
  --lh-body:     1.6;
  --lh-snug:     1.4;

  /* Letter spacing */
  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-body:    0;
  --tracking-caption: 0.08em;

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semi:     600;

  /* ---------- Spacing ---------- */
  --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;
  --space-11: 192px;
  --space-12: 256px;

  /* Section padding — fluid */
  --section-py: clamp(48px, 7vh, 112px);
  --section-px: clamp(20px, 5vw, 80px);

  /* ---------- Layout ---------- */
  --container-max:   1440px;
  --container-narrow: 960px;
  --container-prose:  720px;

  /* ---------- Border / Radius ---------- */
  --radius-none:   0;
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-lg:     8px;
  --radius-pill:   999px;
  --border-thin:   1px solid var(--color-ink-faint);
  --border-strong: 1px solid var(--color-ink);

  /* ---------- Motion ----------
     Editorial = slow, considered. No bouncy easings.
  */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:    180ms;
  --duration-base:    320ms;
  --duration-slow:    600ms;
  --duration-slower:  1200ms;

  /* ---------- Z-index ---------- */
  --z-base:    0;
  --z-content: 1;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}

/* ---------- Reduced motion override ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-base:   0ms;
    --duration-slow:   0ms;
    --duration-slower: 0ms;
  }
}