/* ==========================================================================
   Design Tokens — Sadie Noir
   Synced with sadie-noir.pen variables
   ========================================================================== */

:root {
  /* Colors — Background */
  --color-bg:             hsl(240 10% 6%);       /* #0E0E12 */
  --color-surface:        hsl(240 8% 10%);       /* #17171E */
  --color-surface-raised: hsl(240 8% 14%);       /* #212130 */

  /* Colors — Text */
  --color-text:           hsl(40 20% 90%);       /* #E8E2D6 */
  --color-text-muted:     hsl(40 10% 55%);       /* #928A7A */

  /* Colors — Accent */
  --color-accent:         hsl(38 70% 55%);       /* #D4A033 */
  --color-accent-hover:   hsl(38 70% 65%);       /* #DFBA5C */
  --color-accent-subtle:  hsl(38 70% 55% / 0.15);
  --color-accent-glow:    hsl(38 70% 55% / 0.3);

  /* Colors — Secondary */
  --color-secondary:      hsl(350 50% 45%);      /* #A63B4D */

  /* Colors — Border */
  --color-border:         hsl(240 8% 20%);       /* #2A2A38 */

  /* Typography */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-accent:  "Playfair Display", Georgia, serif;

  /* Type Scale (fluid) */
  --text-hero:    clamp(3rem, 8vw, 6rem);
  --text-h1:      clamp(2.5rem, 5vw, 4rem);
  --text-h2:      clamp(1.75rem, 3.5vw, 2.5rem);
  --text-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --text-body:    clamp(1rem, 1.2vw, 1.125rem);
  --text-small:   clamp(0.875rem, 1vw, 1rem);
  --text-caption:  0.75rem;

  /* Spacing (8px grid) */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Borders & Shadows */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-pill:  9999px;

  --shadow-sm:   0 1px 2px hsl(0 0% 0% / 0.3);
  --shadow-md:   0 4px 12px hsl(0 0% 0% / 0.4), 0 1px 3px hsl(0 0% 0% / 0.2);
  --shadow-lg:   0 12px 40px hsl(0 0% 0% / 0.5), 0 4px 12px hsl(0 0% 0% / 0.3);
  --shadow-glow: 0 0 20px var(--color-accent-subtle);

  /* Animation */
  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-cubic:  cubic-bezier(0.32, 0, 0.67, 0);

  /* Layout */
  --max-width:            1200px;
  --nav-height:           4.5rem;
  --mini-player-height:   4.5rem;
}