/* Studio bold (studio-bold) — generated by design-kit/scripts/tokens.mjs
   Mood: loud, graphic, confident
   Signature: Giant type that touches the edges, thick 2px black borders, color blocks instead of cards, one electric accent.
   Fonts: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;500;600;700&display=swap">
   Use ONLY these variables for color, type, space, radius, shadow, motion. */
:root {
  color-scheme: light;

  /* color roles */
  --color-bg: #EFEDE8;
  --color-surface: #FFFFFF;
  --color-text: #111111;
  --color-muted: #4A4A4A;
  --color-border: #111111;
  --color-accent: #3A36F5;          /* fills: primary buttons, selected states */
  --color-on-accent: #FFFFFF;         /* text on accent fills */
  --color-accent-text: #3A36F5;     /* links and accent-colored text on bg */
  --color-accent-soft: #E4EBFF;     /* tinted backgrounds */
  --color-accent-2: #FF4F9A;         /* secondary highlight, use rarely */
  --color-success: #077A37;
  --color-warning: #995D08;
  --color-danger: #C01C28;
  --color-on-danger: #FFFFFF;
  --color-focus: #3A36F5;
  --accent-50: #F4F7FF;
  --accent-100: #E4EBFF;
  --accent-200: #CAD6FF;
  --accent-300: #A7BAFD;
  --accent-400: #819AFD;
  --accent-500: #5E76FD;
  --accent-600: #444EFE;
  --accent-700: #3437D8;
  --accent-800: #2626AA;
  --accent-900: #19187C;

  /* type */
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-ui: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, monospace;
  --step-n2: 0.75rem;   /* 12px */
  --step-n1: 0.75rem;   /* 12px */
  --step-0: 1.0625rem;   /* 17px */
  --step-1: 1.625rem;   /* 26px */
  --step-2: 2.375rem;   /* 38px */
  --step-3: 3.5625rem;   /* 57px */
  --step-4: 5.375rem;   /* 86px */
  --step-5: 8.0625rem;   /* 129px */
  --step-6: 12.125rem;   /* 194px */
  --weight-heading: 700;
  --tracking-heading: -0.04em;
  --leading-body: 1.45;
  --leading-heading: 1.12;
  --measure: 65ch;

  /* space (use only these) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* shape and depth */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 999px;
  --radius-pill: 999px;
  --shadow-1: none;
  --shadow-2: none;

  /* controls */
  --control-sm: 36px;
  --control-md: 40px;
  --control-lg: 44px;

  /* motion */
  --dur-fast: 90ms;
  --dur-slow: 220ms;
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-slow: 0ms; }
}