/* ==========================================================================
   Design system tokens. Single source of truth for every variant.
   Variants override token VALUES only (in their styles.css), never names.

   Fonts (add to each variant's <head>):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces & text (light) */
  --bg-primary: #F4F2F1;      /* canvas, matches the art background */
  --bg-secondary: #EAE4DF;
  --bg-elevated: #FFFFFF;
  --text-primary: #2A2420;    /* charcoal */
  --text-secondary: #5C524B;  /* AA on both bg tokens */
  --border-color: #D8CEC6;

  /* Brand */
  --primary-color: #17707A;   /* slate-teal, darkened for AA text/button contrast on light */
  --primary-contrast: #FFFFFF;
  --secondary-color: #D9BAA1; /* almond */
  --accent-color: #C2187A;    /* magenta signal, use sparingly */
  --glow-color: #2FB7C2;      /* raw slate-teal for lines, glows, decoration */
  --focus-ring: #17707A;

  /* Typography */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: 1.25rem;    /* 20 */
  --text-2xl: 1.5rem;    /* 24 */
  --text-3xl: 1.875rem;  /* 30 */
  --text-display: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem); /* hero h1 */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-mono: 0.08em;

  /* Spacing (4px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --section-y: clamp(var(--space-12), 8vw, 7rem);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --gutter: var(--space-4);
  --header-h: 4rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgb(42 36 32 / 0.08);
  --shadow-md: 0 6px 20px -6px rgb(42 36 32 / 0.18);
  --shadow-lg: 0 24px 48px -16px rgb(42 36 32 / 0.25);
  --shadow-glow: 0 0 0 1px rgb(47 183 194 / 0.35), 0 0 24px rgb(47 183 194 / 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;

  /* Art placeholder (used by .art-frame when image is missing) */
  --art-placeholder-from: #EDE7E2;
  --art-placeholder-to: #D9BAA1;
  --art-silhouette: rgb(42 36 32 / 0.12);
}

/* Dark values, kept identical in both blocks below */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #141110;
  --bg-secondary: #1F1A17;
  --bg-elevated: #2A2420;
  --text-primary: #F4F2F1;
  --text-secondary: #B9ADA3;
  --border-color: #3A322C;
  --primary-color: #2FB7C2;
  --primary-contrast: #0E1416;
  --secondary-color: #D9BAA1;
  --accent-color: #F0479E;
  --glow-color: #2FB7C2;
  --focus-ring: #5FD3DC;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 6px 20px -6px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 24px 48px -16px rgb(0 0 0 / 0.7);
  --art-placeholder-from: #1F1A17;
  --art-placeholder-to: #2A3638;
  --art-silhouette: rgb(47 183 194 / 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-primary: #141110;
    --bg-secondary: #1F1A17;
    --bg-elevated: #2A2420;
    --text-primary: #F4F2F1;
    --text-secondary: #B9ADA3;
    --border-color: #3A322C;
    --primary-color: #2FB7C2;
    --primary-contrast: #0E1416;
    --secondary-color: #D9BAA1;
    --accent-color: #F0479E;
    --glow-color: #2FB7C2;
    --focus-ring: #5FD3DC;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 6px 20px -6px rgb(0 0 0 / 0.6);
    --shadow-lg: 0 24px 48px -16px rgb(0 0 0 / 0.7);
    --art-placeholder-from: #1F1A17;
    --art-placeholder-to: #2A3638;
    --art-silhouette: rgb(47 183 194 / 0.14);
  }
}

@media (min-width: 768px) {
  :root { --gutter: var(--space-6); --header-h: 4.5rem; }
}
@media (min-width: 1024px) {
  :root { --gutter: var(--space-8); }
}