/*
  Design tokens — the single source of truth for color, type, space and motion.
  Every other stylesheet on the site reads from these custom properties only.
  Changing the brand palette or rhythm happens here, nowhere else.
*/

:root {
  /* ---------- Color: surfaces ---------- */
  --color-ink:            #0a0a0b;   /* primary background */
  --color-ink-raised:     #131315;   /* cards, raised panels */
  --color-ink-overlay:    #1b1b1e;   /* modals, nav-open, popovers */
  --color-hairline:       rgba(244, 241, 234, 0.10);
  --color-hairline-strong:rgba(244, 241, 234, 0.18);

  /* ---------- Color: foreground ---------- */
  --color-paper:          #f4f1ea;  /* warm off-white, primary text */
  --color-paper-muted:    #a8a49c;  /* secondary text */
  --color-paper-faint:    #8f8b83;  /* tertiary text — lightened from #6f6c66 to clear WCAG AA (4.5:1) at small sizes */

  /* ---------- Color: brand accents ----------
     Sampled directly from the Animus logo (purple wordmark + teal subtext). */
  --color-purple:            #924885;
  --color-purple-bright:     #b37faa;
  --color-purple-dim:        #5f2f56;
  --color-teal:              #008dd4;
  --color-teal-bright:       #4dafe1;
  --color-plum-deep:         #42203c;
  --color-star:              #f2b400; /* conventional rating-star yellow — intentionally not a brand color */

  /* ---------- Semantic ---------- */
  --color-bg:            var(--color-ink);
  --color-bg-raised:     var(--color-ink-raised);
  --color-fg:            var(--color-paper);
  --color-fg-muted:      var(--color-paper-muted);
  --color-fg-faint:      var(--color-paper-faint);
  --color-accent:        var(--color-purple);
  --color-accent-bright: var(--color-purple-bright);
  --color-border:        var(--color-hairline);
  --color-border-strong: var(--color-hairline-strong);
  --color-focus:         var(--color-purple-bright);

  /* ---------- Typography ---------- */
  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale — clamp(min, preferred-vw, max) */
  --text-xs:    0.8125rem;
  --text-sm:    0.9375rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl:    clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl:   clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --text-3xl:   clamp(2.5rem, 1.7rem + 3.2vw, 4rem);
  --text-4xl:   clamp(3rem, 1.8rem + 5vw, 5.75rem);
  --text-5xl:   clamp(3.5rem, 1.6rem + 8vw, 8rem);

  --leading-tight:  1.05;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;
  --tracking-wider: 0.2em;

  /* ---------- Space (4px base) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 11rem;

  /* Fluid section rhythm */
  --space-section: clamp(5rem, 4rem + 4vw, 9rem);
  --space-gutter:  clamp(1.25rem, 1rem + 2vw, 4rem);
  --content-max:   90rem;
  --prose-max:     40rem;

  /* ---------- Radius ---------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   200ms;
  --duration-base:   400ms;
  --duration-slow:   700ms;
  --duration-slower: 1200ms;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.4);
  --shadow-accent-glow: 0 0 40px rgba(198, 161, 91, 0.25);

  /* ---------- Layout ---------- */
  --header-h: 5.5rem;
  --z-header: 100;
  --z-overlay: 200;
  --z-cursor: 300;
  --z-toast: 400;
}