/* Hallmark · design-system tokens · theme: custom "after-hours blood"
 * vibe: underground rave, archive merch, blood red on warm black
 * axes: dark / display-condensed / warm
 * Every colour + font on the site comes from here. Add a token before using a new value.
 */
:root {
  /* Surfaces: warm near-black, elevation = lightness */
  --color-paper:        oklch(8.5% 0.008 25);
  --color-paper-2:      oklch(12% 0.01 25);
  --color-paper-3:      oklch(16% 0.012 25);
  --color-overlay:      oklch(6% 0.006 25 / 0.94);

  /* Ink: bone, never pure white */
  --color-ink:          oklch(94% 0.012 70);
  --color-ink-2:        oklch(78% 0.012 60);
  --color-ink-3:        oklch(62% 0.012 50);

  /* Rules */
  --color-rule:         oklch(21% 0.012 25);
  --color-rule-strong:  oklch(32% 0.014 25);

  /* Blood red: the only accent */
  --color-accent:       oklch(62% 0.22 25);
  --color-accent-deep:  oklch(42% 0.17 25);
  --color-accent-hover: oklch(48% 0.19 25);
  --color-accent-wash:  oklch(62% 0.22 25 / 0.12);
  --color-accent-glow:  oklch(38% 0.16 25 / 0.16);
  --color-on-accent:    oklch(97% 0.01 70);
  --color-focus:        oklch(72% 0.19 25);

  /* Canvas particles take plain RGB triplets (same hues as accent + ink) */
  --particle-ember: 236, 51, 67;
  --particle-ash: 243, 239, 233;

  /* Motion surfaces */
  --color-shine:   oklch(100% 0 0 / 0.16);
  --color-ghost:   oklch(36% 0.02 25 / 0.55);
  --shadow-lift:   0 30px 60px -28px oklch(2% 0.005 25 / 0.95);
  --ease-spring:   cubic-bezier(0.22, 1.2, 0.36, 1);
  --dur-enter:     850ms;

  /* Status */
  --color-success:      oklch(84% 0.13 150);
  --color-success-wash: oklch(84% 0.13 150 / 0.1);
  --color-warning:      oklch(84% 0.12 80);
  --color-warning-wash: oklch(84% 0.12 80 / 0.1);
  --color-danger:       oklch(76% 0.14 20);
  --color-danger-wash:  oklch(62% 0.2 20 / 0.14);

  /* Type: display + body + one outlier (identifiers: order code, AWB) */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:    "Geist", ui-sans-serif, "Segoe UI", sans-serif;
  --font-outlier: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Scale: major third */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-3xl:  3.0518rem;
  --text-display: clamp(3rem, 5.5vw + 1rem, 5.5rem);

  /* Space: 4pt */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --page-gutter: clamp(1rem, 4vw, 3rem);
  --measure: 62ch;
  --max-width: 1360px;

  /* Shape + rules */
  --radius: 2px;
  --rule-hair: 1px;
  --rule-thick: 3px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 160ms;
  --dur-med: 320ms;
  --dur-long: 700ms;

  /* Layers */
  --z-base: 1;
  --z-sticky: 20;
  --z-overlay: 40;
}