/* GENERATED by scripts/build-tokens.mjs from design/tokens/tokens.json. Do not edit by hand. */
:root {
  --color-black-0: var(--color-white);
  --color-black-50: #f3f3f3;
  --color-black-100: #e6e6e6;
  --color-black-200: #cecece;
  --color-black-300: #b5b5b5;
  --color-black-400: #9c9c9c;
  --color-black-500: #848484;
  --color-black-600: #6b6b6b;
  --color-black-700: #525252;
  --color-black-800: #3a3a3a;
  --color-black-900: #212121;
  --color-white: #ffffff;
  --color-sand: #eddcba;
  --color-accent-red: #ff3b30;
  --color-accent-orange: #ff9500;
  --color-accent-green: #00c853;
  --color-surface-page: var(--color-white);
  --color-surface-raised: var(--color-white);
  --color-surface-sand: var(--color-sand);
  --color-surface-inverse: var(--color-black-900);
  --color-text-primary: var(--color-black-900);
  --color-text-muted: var(--color-black-700);
  --color-text-on-inverse: var(--color-white);
  --color-border-default: var(--color-black-900);
  --color-status-error: var(--color-accent-red);
  --color-status-warning: var(--color-accent-orange);
  --color-status-success: var(--color-accent-green);
  --border-width: 6px;
  --border-style: solid;
  --border-default: var(--border-width) solid var(--color-border-default);
  --radius-default: 10px;
  --shadow-offset: 8px;
  --shadow-hard: var(--shadow-offset) var(--shadow-offset) 0px 0px var(--color-black-900);
  --focus-ring: 4px solid var(--color-black-900);
  --font-family-display: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-family-text: Aleo, Georgia, "Times New Roman", serif;
  --font-weight-display-medium: 500;
  --font-weight-display-bold: 700;
  --font-weight-display-extrabold: 800;
  --font-weight-text-regular: 400;
  --font-weight-text-bold: 700;
  --type-ratio: 1.25;
  --type-base: 1rem;
  --type-scale-0: 1.0rem;
  --type-scale-1: 1.25rem;
  --type-scale-2: 1.5625rem;
  --type-scale-3: 1.9531rem;
  --type-scale-4: 2.4414rem;
  --type-scale-5: 3.0518rem;
  --type-scale-6: 3.8147rem;
  --type-scale-7: 4.7684rem;
  --type-scale--1: 0.8rem;
  --type-h1-family: var(--font-family-display);
  --type-h1-weight: var(--font-weight-display-extrabold);
  --type-h1-size: clamp(2.4414rem, 1.9578rem + 2.0632vw, 3.8147rem);
  --type-h1-line-height: 1.05;
  --type-h1-letter-spacing: -0.02em;
  --type-h2-family: var(--font-family-display);
  --type-h2-weight: var(--font-weight-display-extrabold);
  --type-h2-size: clamp(1.9531rem, 1.5662rem + 1.6506vw, 3.0518rem);
  --type-h2-line-height: 1.1;
  --type-h2-letter-spacing: -0.02em;
  --type-h3-family: var(--font-family-display);
  --type-h3-weight: var(--font-weight-display-bold);
  --type-h3-size: clamp(1.5625rem, 1.253rem + 1.3204vw, 2.4414rem);
  --type-h3-line-height: 1.15;
  --type-h3-letter-spacing: -0.015em;
  --type-h4-family: var(--font-family-display);
  --type-h4-weight: var(--font-weight-display-bold);
  --type-h4-size: clamp(1.25rem, 1.0024rem + 1.0563vw, 1.9531rem);
  --type-h4-line-height: 1.25;
  --type-h4-letter-spacing: -0.01em;
  --type-lead-family: var(--font-family-text);
  --type-lead-weight: var(--font-weight-text-regular);
  --type-lead-size: clamp(1.25rem, 1.14rem + 0.4695vw, 1.5625rem);
  --type-lead-line-height: 1.4;
  --type-lead-letter-spacing: 0em;
  --type-body-family: var(--font-family-text);
  --type-body-weight: var(--font-weight-text-regular);
  --type-body-size: 1rem;
  --type-body-line-height: 1.6;
  --type-body-letter-spacing: 0em;
  --type-body-strong-family: var(--font-family-text);
  --type-body-strong-weight: var(--font-weight-text-bold);
  --type-body-strong-size: 1rem;
  --type-body-strong-line-height: 1.6;
  --type-body-strong-letter-spacing: 0em;
  --type-small-family: var(--font-family-text);
  --type-small-weight: var(--font-weight-text-regular);
  --type-small-size: 0.8rem;
  --type-small-line-height: 1.5;
  --type-small-letter-spacing: 0em;
  --type-label-family: var(--font-family-display);
  --type-label-weight: var(--font-weight-display-bold);
  --type-label-size: 1rem;
  --type-label-line-height: 1;
  --type-label-letter-spacing: 0em;
  --type-measure-body: 65ch;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --breakpoint-sm: 375px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1440px;
  --layout-container: 1200px;
  --layout-page-padding: 24px;
  --layout-gutter: 16px;
  --layout-columns-mobile: 4;
  --layout-columns-tablet: 8;
  --layout-columns-desktop: 12;
  --touch-target: 48px;
  --touch-gap: 8px;
  --interaction-hover-shift: 5px;
  --interaction-duration: 100ms;
  --icon-size-sm: 20px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-stroke-sm: 1.8;
  --icon-stroke-md: 2;
  --icon-stroke-lg: 2.5;
  --component-card-background: var(--color-surface-raised);
  --component-card-border: var(--border-default);
  --component-card-radius: var(--radius-default);
  --component-card-shadow: var(--shadow-hard);
  --component-block-background: var(--color-surface-sand);
  --component-block-border: var(--border-default);
  --component-block-radius: var(--radius-default);
  --component-block-shadow: var(--shadow-hard);
  --component-button-background: var(--color-surface-raised);
  --component-button-text: var(--color-text-primary);
  --component-button-border: var(--border-default);
  --component-button-radius: var(--radius-default);
  --component-button-shadow: var(--shadow-hard);
  --component-button-minHeight: var(--touch-target);
  --component-button-padding: var(--space-6);
  --component-input-background: var(--color-surface-raised);
  --component-input-border: var(--border-default);
  --component-input-radius: var(--radius-default);
  --component-input-minHeight: var(--touch-target);
}

/* >= 768px: full-size border, radius, shadow and desktop spacing */
@media (min-width: 768px) {
  :root {
    --border-width: 10px;
    --radius-default: 15px;
    --shadow-offset: 15px;
    --layout-page-padding: 48px;
    --layout-gutter: 32px;
  }
}