/* ============================================================
   tokens.css — Artistic Composition design tokens
   All CSS custom properties. No selectors, no rules.
   Every other CSS file uses var() to reference these.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Colors (oklch color space for perceptual uniformity)
     ---------------------------------------------------------- */

  --ac-bg:           oklch(97% 0.008 80);   /* Page background, card background */
  --ac-paper:        oklch(94% 0.012 80);   /* Elevated surfaces: paywall, pricing card */
  --ac-ink:          oklch(18% 0.012 60);   /* Primary text, ink buttons, mark fill */
  --ac-ink-hover:    oklch(28% 0.015 60);   /* Primary button hover */
  --ac-muted:        oklch(48% 0.01  60);   /* Secondary text, eyebrows, captions */
  --ac-hair:         oklch(88% 0.008 70);   /* 1px dividers, card borders */
  --ac-accent:       oklch(58% 0.15  35);   /* Terracotta — CTA, active nav, dot */
  --ac-accent-hover: oklch(52% 0.15  35);   /* Accent button / link hover */

  /* ----------------------------------------------------------
     Spacing scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 px
     ---------------------------------------------------------- */

  --ac-sp-1:   4px;
  --ac-sp-2:   8px;
  --ac-sp-3:  12px;
  --ac-sp-4:  16px;
  --ac-sp-5:  24px;
  --ac-sp-6:  32px;
  --ac-sp-7:  48px;
  --ac-sp-8:  64px;
  --ac-sp-9:  96px;
  --ac-sp-10: 128px;

  /* ----------------------------------------------------------
     Layout
     ---------------------------------------------------------- */

  --ac-max-width:        1440px;
  --ac-page-pad:         40px;   /* Desktop side padding */
  --ac-page-pad-mobile:  18px;   /* Mobile side padding */

  /* ----------------------------------------------------------
     Typography — families
     ---------------------------------------------------------- */

  --ac-font-display: 'Manrope', system-ui, sans-serif;
  --ac-font-body:    'Manrope', system-ui, sans-serif;
  --ac-font-mono:    'JetBrains Mono', monospace;

  /* ----------------------------------------------------------
     Typography — desktop scale
     ---------------------------------------------------------- */

  --ac-text-hero:     108px;
  --ac-text-h1:        56px;
  --ac-text-h2:        34px;
  --ac-text-h3:        24px;
  --ac-text-body-lg:   20px;
  --ac-text-body:      19px;
  --ac-text-body-sm:   16px;
  --ac-text-label:     11px;   /* Mono eyebrow / caption */

  /* ----------------------------------------------------------
     Typography — line heights
     ---------------------------------------------------------- */

  --ac-lh-hero:   0.95;
  --ac-lh-h1:     1;
  --ac-lh-h2:     1.15;
  --ac-lh-h3:     1.3;
  --ac-lh-body:   1.55;
  --ac-lh-label:  1.4;

  /* ----------------------------------------------------------
     Typography — letter spacing
     ---------------------------------------------------------- */

  --ac-ls-hero:  -0.035em;
  --ac-ls-h1:    -0.03em;
  --ac-ls-h2:    -0.02em;
  --ac-ls-h3:    -0.015em;
  --ac-ls-label:  0.22em;

  /* ----------------------------------------------------------
     Motion
     ---------------------------------------------------------- */

  --ac-ease:       cubic-bezier(0.2, 0.7, 0.3, 1);
  --ac-duration:   180ms;
  --ac-transition: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ----------------------------------------------------------
     Z-index scale
     ---------------------------------------------------------- */

  --ac-z-nav-sheet: 200;
  --ac-z-header:    100;
  --ac-z-paywall:    10;

}

/* ----------------------------------------------------------
   Mobile overrides for type scale (≤ 768px)
   ---------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --ac-text-hero:  50px;
    --ac-text-h1:    40px;
    --ac-text-h2:    28px;
    --ac-text-body:  16px;
    --ac-text-body-sm: 15px;  /* floor is 16px rendered — never go below */
    --ac-page-pad:   var(--ac-page-pad-mobile);
  }
}