/* =========================================================================
   McVibe Apps - Design Tokens
   Single source of truth. Edit values here, never in components.
   ========================================================================= */

:root {
  /* ---------- Color (dark by default) ---------- */
  --color-bg:               oklch(0.165 0.004 60);   /* near-black, warm */
  --color-bg-elevated:      oklch(0.205 0.004 60);
  --color-bg-subtle:        oklch(0.185 0.004 60);
  --color-bg-inset:         oklch(0.135 0.004 60);

  --color-line:             oklch(0.28 0.005 60);
  --color-line-strong:      oklch(0.38 0.006 60);
  --color-line-faint:       oklch(0.235 0.005 60);

  --color-text:             oklch(0.965 0.003 60);
  --color-text-secondary:   oklch(0.74 0.005 60);
  --color-text-tertiary:    oklch(0.55 0.005 60);
  --color-text-quaternary:  oklch(0.40 0.005 60);

  /* Curated accent palette - pick one via [data-accent] */
  --accent-gold:    oklch(0.80 0.135 82);
  --accent-mono:    oklch(0.965 0.003 60);
  --accent-cobalt:  oklch(0.72 0.155 250);
  --accent-forest:  oklch(0.70 0.110 155);

  --color-accent:        var(--accent-gold);
  --color-accent-fg:     oklch(0.16 0.004 60);
  --color-accent-muted:  color-mix(in oklch, var(--color-accent) 18%, transparent);

  /* ---------- Type ---------- */
  --font-display: "Instrument Serif", ui-serif, Georgia, serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --tracking-eyebrow:  0.14em;
  --tracking-tight:   -0.02em;
  --tracking-display: -0.035em;
  --tracking-italic:  -0.015em;

  --leading-display: 0.92;
  --leading-tight:   1.05;
  --leading-snug:    1.25;
  --leading-body:    1.55;
  --leading-relaxed: 1.7;

  /* Fluid type scale */
  --text-eyebrow:  0.6875rem;                                 /* 11 */
  --text-micro:    0.75rem;                                   /* 12 */
  --text-small:    0.875rem;                                  /* 14 */
  --text-body:     1rem;                                      /* 16 */
  --text-lede:     clamp(1.0625rem, 0.94rem + 0.55vw, 1.375rem); /* 17 → 22 */
  --text-h4:       clamp(1.125rem, 1rem + 0.4vw,   1.375rem); /* 18 → 22 */
  --text-h3:       clamp(1.5rem,   1.3rem + 0.9vw, 2rem);     /* 24 → 32 */
  --text-h2:       clamp(2.25rem,  1.7rem + 2.4vw, 3.75rem);  /* 36 → 60 */
  --text-h1:       clamp(3rem,     2rem + 4.5vw,   5.5rem);   /* 48 → 88 */
  --text-display:  clamp(4rem,     2rem + 9vw,    10.5rem);   /* 64 → 168 */

  /* ---------- Space (4px base) ---------- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */
  --space-11: 12rem;     /* 192 */

  /* Section rhythm - fluid */
  --section-y: clamp(5rem, 3rem + 6vw, 9rem);
  --section-y-lg: clamp(7rem, 4rem + 9vw, 12rem);

  /* ---------- Layout ---------- */
  --max-content: 1240px;
  --max-prose:   62ch;
  --gutter:      clamp(1.25rem, 0.6rem + 2vw, 2.5rem);

  /* ---------- Radius ---------- */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 18px;
  --radius-5: 28px;
  --radius-pill: 999px;

  /* ---------- Border ---------- */
  --hairline: 1px solid var(--color-line);
  --hairline-strong: 1px solid var(--color-line-strong);
  --hairline-faint: 1px solid var(--color-line-faint);

  /* ---------- Shadow (sparing) ---------- */
  --shadow-1: 0 1px 0 0 oklch(1 0 0 / 0.04) inset;
  --shadow-2: 0 12px 40px -16px oklch(0 0 0 / 0.6);
  --shadow-3: 0 24px 80px -24px oklch(0 0 0 / 0.7);
  --glow-accent: 0 0 0 1px color-mix(in oklch, var(--color-accent) 40%, transparent),
                 0 8px 40px -12px color-mix(in oklch, var(--color-accent) 35%, transparent);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.16, 1.08, 0.4, 1.04);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  color-scheme: dark;
}

/* ---------- Accent variants (Tweaks) ---------- */
:root[data-accent="gold"]    { --color-accent: var(--accent-gold); }
:root[data-accent="mono"]    { --color-accent: var(--accent-mono); --color-accent-fg: oklch(0.16 0.004 60); }
:root[data-accent="cobalt"]  { --color-accent: var(--accent-cobalt); --color-accent-fg: oklch(0.97 0.003 60); }
:root[data-accent="forest"]  { --color-accent: var(--accent-forest); --color-accent-fg: oklch(0.13 0.004 60); }

/* ---------- Type pairings (Tweaks) ---------- */
:root[data-type="editorial"] {
  --font-display: "Instrument Serif", ui-serif, Georgia, serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --tracking-display: -0.035em;
}
:root[data-type="newsreader"] {
  --font-display: "Newsreader", ui-serif, Georgia, serif;
  --font-body:    "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --tracking-display: -0.03em;
}
:root[data-type="bodoni"] {
  --font-display: "Bodoni Moda", ui-serif, "Didot", "Times New Roman", serif;
  --font-body:    "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --tracking-display: -0.025em;
}
:root[data-type="grotesk"] {
  --font-display: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --tracking-display: -0.045em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}