/* Hallmark · KargoOke redesign · design tokens (v2 — atmospheric AI)
 * theme: custom · vibe: "smart customs tech, futuristic, glowing, airy"
 * paper: oklch(99% 0.004 250) · accent: oklch(50% 0.17 257) · cyan: oklch(72% 0.13 220)
 * display: Space Grotesk · body: Plus Jakarta Sans · axes: light / geometric-sans / cool
 */
:root {
  /* — Paper / surfaces — */
  --color-paper:      oklch(99% 0.004 250);
  --color-paper-2:    oklch(97.8% 0.006 250);
  --color-paper-3:    oklch(95.5% 0.009 252);
  --color-paper-ink:  oklch(19% 0.05 264);   /* dark panel surface */
  --color-paper-ink2: oklch(24% 0.055 264);

  /* — Ink / text — */
  --color-ink:        oklch(23% 0.05 264);
  --color-ink-2:      oklch(42% 0.04 262);
  --color-muted:      oklch(55% 0.03 260);
  --color-on-dark:    oklch(98% 0.006 250);
  --color-on-dark-2:  oklch(80% 0.025 250);

  /* — Rules — */
  --color-rule:       oklch(90% 0.014 250);
  --color-rule-2:     oklch(94% 0.01 250);
  --color-rule-dark:  oklch(36% 0.04 260);

  /* — Accent (brand blue #0B5FBF) — */
  --color-accent:        oklch(50% 0.17 257);
  --color-accent-strong: oklch(43% 0.16 258);
  --color-accent-soft:   oklch(95% 0.04 252);
  --color-accent-wash:   oklch(97% 0.02 252);
  --color-accent-ink:    oklch(99% 0.004 250);

  /* — Cyan (AI/future glow partner) — */
  --color-cyan:       oklch(72% 0.13 220);
  --color-cyan-soft:  oklch(94% 0.05 215);

  /* — Highlight (brand yellow #FFC629) — used sparingly — */
  --color-highlight:     oklch(84% 0.16 88);
  --color-highlight-ink: oklch(28% 0.05 80);

  /* — Focus — */
  --color-focus:      oklch(54% 0.21 257);

  /* — Mesh / glow palette — */
  --mesh-blue:    oklch(60% 0.19 257 / 0.40);
  --mesh-cyan:    oklch(78% 0.14 215 / 0.34);
  --mesh-violet:  oklch(66% 0.14 285 / 0.20);
  --mesh-soft:    oklch(92% 0.05 245 / 0.55);
  --glow-accent:  0 0 0 1px oklch(60% 0.17 257 / 0.25), 0 18px 60px oklch(55% 0.18 257 / 0.30);
  --glow-cyan:    0 0 48px oklch(72% 0.14 215 / 0.45);

  /* — Fonts — */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono:    "Inter", "Plus Jakarta Sans", system-ui, sans-serif;

  /* — Type scale (bumped for readability) — */
  --text-display:   clamp(2.8rem, 5.2vw + 0.6rem, 4.75rem);
  --text-display-s: clamp(2.2rem, 3.8vw + 0.5rem, 3.4rem);
  --text-4xl: clamp(1.85rem, 2.4vw + 0.6rem, 2.7rem);
  --text-3xl: clamp(1.5rem, 1.5vw + 0.7rem, 2rem);
  --text-2xl: 1.4rem;
  --text-xl:  1.2rem;
  --text-lg:  1.1rem;
  --text-md:  1.0625rem;   /* 17px base */
  --text-sm:  0.9375rem;   /* 15px */
  --text-xs:  0.8125rem;   /* 13px */

  /* — Spacing (4pt) — */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;
  --space-4xl: 9rem;

  /* — Radius — */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-card: 20px;
  --radius-pill: 999px;

  /* — Motion — */
  --dur-short: 140ms;
  --dur-mid:   260ms;
  --dur-long:  560ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* — Elevation — */
  --shadow-sm: 0 1px 2px oklch(50% 0.08 257 / 0.06), 0 2px 6px oklch(50% 0.08 257 / 0.05);
  --shadow-md: 0 10px 30px oklch(50% 0.1 257 / 0.10), 0 2px 8px oklch(50% 0.08 257 / 0.06);
  --shadow-lg: 0 30px 70px oklch(45% 0.12 257 / 0.18), 0 8px 22px oklch(45% 0.1 257 / 0.08);

  /* — z-index scale — */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 100;
  --z-overlay: 1000;
}