/* Hallmark · macrostructure: Workbench · tone: neo-brutalist · anchor hue: electric blue
 * theme: original ReadyKit · nav: N7 brutal slab · footer: Ft2
 * User-directed continuity: retain original grid, hard edges, offset shadows, and bright accents.
 * pre-emit critique: P5 H4 E4 S5 R4 V4 */
:root {
  --color-bg: oklch(98% 0.004 95);
  --color-surface: oklch(99.5% 0.003 95);
  --color-surface-alt: oklch(95% 0.008 95);
  --color-text: oklch(17% 0.007 265);
  --color-text-secondary: oklch(34% 0.009 265);
  --color-text-muted: oklch(43% 0.011 265);
  --color-primary: oklch(49% 0.235 264);
  --color-primary-hover: oklch(42% 0.22 264);
  --color-primary-soft: oklch(94% 0.027 264);
  --color-accent: var(--color-primary);
  --color-accent-ink: oklch(99% 0.004 255);
  --color-border: var(--color-text);
  --color-border-light: oklch(78% 0.009 265);
  --color-dark: oklch(17% 0.007 265);
  --color-on-dark: oklch(95% 0.012 255);
  --color-dark-muted: oklch(74% 0.026 255);
  --color-dark-border: oklch(39% 0.025 255);
  --color-code-keyword: oklch(43% 0.2 275);
  --color-code-string: oklch(39% 0.075 190);
  --color-code-light: oklch(79% 0.09 255);
  --color-error: oklch(45% 0.16 25);
  --color-dark-error: oklch(82% 0.09 25);
  --color-yellow: oklch(91% 0.185 99);
  --color-pink: oklch(93% 0.055 350);
  --color-mint: oklch(94% 0.085 157);
  --color-peach: oklch(93% 0.061 60);
  --color-grid: oklch(88% 0.006 95);
  --color-hero: oklch(96% 0.035 95);
  --color-lilac: oklch(94% 0.032 295);
  --color-workspace: oklch(96% 0.038 157);
  --color-code-paper: oklch(96% 0.035 65);
  --color-faq-paper: oklch(96% 0.024 350);
  --color-stripe-blue: oklch(55% 0.205 264);
  --color-stripe-light: oklch(100% 0 0 / 0.1);
  --shadow-brutal: 6px 6px 0 var(--color-text);
  --shadow-brutal-sm: 3px 3px 0 var(--color-text);
  --color-transparent: transparent;
  --color-focus: var(--color-primary);
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-section: clamp(2rem, 3.3vw, 3rem);
  --text-display: clamp(2rem, 8.8vw, 2.7rem);
  --radius-sm: 0;
  --radius-md: 0;
  --container-width: 1248px;
  --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: 140ms;
  --dur-quick: 100ms;
  --dur-standard: 180ms;
  --dur-enter: 360ms;
}
@media (min-width: 40rem) {
  :root {
    --text-display: clamp(2.7rem, 4.4vw, 4rem);
  }
}