/* CRAYVO — Off Screen Club · design tokens */
/* Generated from branding-view/lib/tokens.ts. Do not edit by hand — change the source. */
:root {
  /* --- neutrals: ink on paper --- */
  --crayvo-beige: #f2e8dc;
  --black: #000000;
  --white: #ffffff;
  /* --- gray ramp: muted surfaces + the dark admin console --- */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  /* --- the five GENZ accents: flat fills, never gradients --- */
  --genz-yellow: #ffde59;
  --genz-red: #ff5757;
  --genz-green: #4ade80;
  --genz-purple: #9333ea;
  --genz-brown: #632a26;
  /* --- semantic aliases --- */
  --bg-app: var(--crayvo-beige);
  --bg-hero: var(--genz-yellow);
  --bg-invert: var(--black);
  --bg-admin: var(--gray-900);
  --surface: var(--white);
  --surface-muted: var(--gray-50);
  --surface-sunken: var(--gray-100);
  --text: var(--black);
  --text-muted: var(--gray-500);
  --text-inverse: var(--white);
  --text-on-hero: var(--black);
  --line: var(--black);
  --link: var(--genz-purple);
  --link-hover: var(--black);
  --selection-bg: var(--black);
  --selection-fg: var(--crayvo-beige);
  --accent-pop: var(--genz-yellow);
  --accent-hot: var(--genz-red);
  --accent-go: var(--genz-green);
  --accent-cult: var(--genz-purple);
  --accent-warm: var(--genz-brown);
  /* --- type: one family, two weights, loud treatment --- */
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: var(--font-mono);
  --font-body: var(--font-mono);
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-black: 700;
  --text-mega: 160px;
  --text-9xl: 128px;
  --text-8xl: 96px;
  --text-7xl: 72px;
  --text-6xl: 60px;
  --text-5xl: 48px;
  --text-4xl: 36px;
  --text-3xl: 30px;
  --text-2xl: 24px;
  --text-xl: 20px;
  --text-lg: 18px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --text-2xs: 10px;
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.15em;
  --leading-none: 0.85;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --display-transform: uppercase;
  --display-style: italic;
  --label-transform: uppercase;
  --label-tracking: var(--tracking-widest);
  /* --- spacing: 4px grid --- */
  --space-0: 0;
  --space-px: 1px;
  --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;
  --pad-card: var(--space-6);
  --pad-page: var(--space-4);
  --pad-page-lg: var(--space-8);
  --gap-grid: var(--space-6);
  --gap-stack: var(--space-4);
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1152px;
  --hit-min: 44px;
  --logo-tile: 40px;
  /* --- effects: thick black borders, hard offset shadows, zero blur --- */
  --border-thin: 2px;
  --border-thick: 4px;
  --radius: 0;
  --radius-full: 9999px;
  --border-color: var(--black);
  --stroke-thin: var(--border-thin) solid var(--border-color);
  --stroke-thick: var(--border-thick) solid var(--border-color);
  --stroke-dashed: var(--border-thin) dashed var(--border-color);
  --shadow-xs: 2px 2px 0 0 var(--black);
  --shadow-sm: 4px 4px 0 0 var(--black);
  --shadow-md: 8px 8px 0 0 var(--black);
  --shadow-lg: 12px 12px 0 0 var(--black);
  --shadow-xl: 16px 16px 0 0 var(--black);
  --shadow-pop-purple: 12px 12px 0 0 var(--genz-purple);
  --shadow-pop-red: 12px 12px 0 0 var(--genz-red);
  --shadow-pop-green: 10px 10px 0 0 var(--genz-green);
  --shadow-pop-yellow: 12px 12px 0 0 var(--genz-yellow);
  --shadow-white-sm: 4px 4px 0 0 var(--white);
  --shadow-white-md: 8px 8px 0 0 var(--white);
  /* --- motion: quick, physical, overshoot on entrance --- */
  --duration-fast: 150ms;
  --duration: 200ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --marquee-duration: 40s;
  --hover-lift: -4px;
  --press-shift: 2px;
  /* --- texture --- */
  --dot-grid: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  --dot-grid-size: 20px 20px;
}