/* tokens.css: Headbang Labs
   direction: retro-future (Retro Future) | palette: Custom palette | seed: 73634
   fonts: Black Ops One / Barlow Condensed | dials: variance 8, motion 8, density 5
   Generated by `studio.py direct`. Same inputs + seed = same file. Hex values carry an oklch() comment. */

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  color-scheme: dark;

  /* typefaces */
  --font-display: 'Black Ops One', 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', 'Segoe UI', sans-serif;
  --font-body: 'Barlow Condensed', 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font-label: var(--font-body);
  --display-weight: 400;
  --heading-weight: 700;
  --body-weight: 400;
  --strong-weight: 600;
  --display-stretch: normal;
  --display-case: uppercase;
  --display-tracking: -0.02em;
  --heading-tracking: -0.01em;
  --leading-display: 1.0;
  --leading-tight: 1.1;
  --leading-body: 1.66;
  --body-tracking: 0.01em;
  --label-case: uppercase;
  --tracking-caps: 0.08em;
  --label-tracking: 0.08em;

  /* fluid type scale 360-1440px (Utopia-style; max capped at 2.5x min for 200% zoom) */
  --step--2: clamp(0.5rem, 0.6867rem - 0.2074vw, 0.64rem);
  --step--1: clamp(0.75rem, 0.8167rem - 0.0741vw, 0.8rem);
  --step-0: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1042rem + 0.6481vw, 1.6875rem);
  --step-2: clamp(1.5625rem, 1.2396rem + 1.4352vw, 2.5312rem);
  --step-3: clamp(1.9531rem, 1.3385rem + 2.7315vw, 3.7969rem);
  --step-4: clamp(2.4414rem, 1.3568rem + 4.8206vw, 5.6953rem);
  --step-5: clamp(3.0518rem, 1.5767rem + 6.5556vw, 7.4768rem);
  --step-6: clamp(3.8147rem, 1.9709rem + 8.1945vw, 9.346rem);
  --step-7: clamp(4.7684rem, 2.4637rem + 10.2432vw, 11.6825rem);

  /* fluid space scale (density 5) */
  --space-3xs: clamp(0.2575rem, 0.2468rem + 0.0477vw, 0.2897rem);
  --space-2xs: clamp(0.515rem, 0.4935rem + 0.0954vw, 0.5794rem);
  --space-xs: clamp(0.7725rem, 0.7403rem + 0.1431vw, 0.8691rem);
  --space-s: clamp(1.03rem, 0.9871rem + 0.1907vw, 1.1587rem);
  --space-m: clamp(1.545rem, 1.4806rem + 0.2861vw, 1.7381rem);
  --space-l: clamp(2.06rem, 1.9742rem + 0.3815vw, 2.3175rem);
  --space-xl: clamp(3.09rem, 2.9612rem + 0.5722vw, 3.4763rem);
  --space-2xl: clamp(4.12rem, 3.9483rem + 0.763vw, 4.635rem);
  --space-3xl: clamp(6.18rem, 5.9225rem + 1.1444vw, 6.9525rem);
  --space-4xl: clamp(8.24rem, 7.8967rem + 1.5259vw, 9.27rem);
  --space-3xs-2xs: clamp(0.2575rem, 0.1502rem + 0.4769vw, 0.5794rem);
  --space-2xs-xs: clamp(0.515rem, 0.3969rem + 0.525vw, 0.8694rem);
  --space-xs-s: clamp(0.7725rem, 0.6437rem + 0.5722vw, 1.1587rem);
  --space-s-m: clamp(1.03rem, 0.794rem + 1.0491vw, 1.7381rem);
  --space-m-l: clamp(1.545rem, 1.2875rem + 1.1444vw, 2.3175rem);
  --space-l-xl: clamp(2.06rem, 1.5879rem + 2.0981vw, 3.4762rem);
  --space-xl-2xl: clamp(3.09rem, 2.575rem + 2.2889vw, 4.635rem);
  --space-2xl-3xl: clamp(4.12rem, 3.1758rem + 4.1963vw, 6.9525rem);
  --space-3xl-4xl: clamp(6.18rem, 5.15rem + 4.5778vw, 9.27rem);
  --space-s-l: clamp(1.03rem, 0.6008rem + 1.9074vw, 2.3175rem);
  --space-m-xl: clamp(1.545rem, 0.9012rem + 2.8611vw, 3.4762rem);
  --space-l-2xl: clamp(2.06rem, 1.2017rem + 3.8148vw, 4.635rem);
  --space-xl-3xl: clamp(3.09rem, 1.8025rem + 5.7222vw, 6.9525rem);
  --space-2xl-4xl: clamp(4.12rem, 2.4033rem + 7.6296vw, 9.27rem);
  --section-space: clamp(3.2rem, 1.9417rem + 5.5926vw, 6.975rem);
  --gutter: var(--space-s-l);
  --container: 1280px;
  --measure: 66ch;

  /* colour (60 / 30 / 10: bg / surface / accent) */
  --c-bg: #0e0c0b; /* oklch(15.6% 0.004 48.5) */
  --c-surface: #1f2125; /* oklch(24.7% 0.008 264.4) */
  --c-ink: #f2e8d5; /* oklch(93.4% 0.027 83.5) */
  --c-muted: #bdb197; /* oklch(76.4% 0.038 86.2) */
  --c-line: #282522; /* oklch(26.7% 0.007 67.5) */
  --c-accent: #ff6b2b; /* oklch(70.4% 0.195 41.1) */
  --c-accent-2: #ffc21a; /* oklch(84.6% 0.169 84.9) */
  --c-accent-ink: #1c0d13; /* oklch(18.3% 0.028 354.6) */
  --c-accent-raw: #c8161f; /* oklch(53.1% 0.206 26.5) */
  --c-accent-raw-ink: #f2e8d5; /* oklch(93.4% 0.027 83.5) */
  --c-accent-2-raw: #2e3238; /* oklch(31.6% 0.012 258.4) */
  --c-selection: color-mix(in oklab, var(--c-accent) 28%, var(--c-bg));
  --c-focus: var(--c-accent);

  /* shape */
  --radius-s: 0px;
  --radius-m: 0px;
  --radius-l: 0px;
  --radius-btn: 0px;
  --border: 1px solid var(--c-line);
  --shadow-1: 0 0 0 1px var(--c-line);
  --shadow-2: 0 30px 60px -30px rgb(0 0 0 / 0.55);

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring: cubic-bezier(0.3, 1.25, 0.6, 1);
  --dur-1: 240ms;
  --dur-2: 624ms;
  --dur-3: 1200ms;
  --dur-ui: 160ms; /* hovers and toggles stay under 300ms */
  --dur-press: 120ms;
  --reveal-distance: 36px;
  --reveal-blur: 12px;
  --stagger: 110ms;

  /* layout dials (variance 8) */
  --split: 8fr 4fr;
  --offset-cols: 2;
  --tilt: -2deg;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-ui: 0ms; --dur-press: 0ms; --reveal-distance: 0px; --reveal-blur: 0px; --stagger: 0ms; --tilt: 0deg; }
}