/* Generated by tokens/build.mjs from Figma variables. Do not edit. */

:root {
  --color-red-50: #fff4f2;
  --color-red-100: #ffe4df;
  --color-red-200: #ffcbc2;
  --color-red-300: #ffa193;
  --color-red-400: #ff6c5d;
  --color-red-500: #ff031b;
  --color-red-600: #db001a;
  --color-red-700: #af0017;
  --color-red-800: #860011;
  --color-red-900: #5c000a;
  --color-red-950: #380004;
  --color-neutral-50: #f9f6f5;
  --color-neutral-100: #eeeaea;
  --color-neutral-200: #ddd8d7;
  --color-neutral-300: #c3bcbb;
  --color-neutral-400: #a89f9e;
  --color-neutral-500: #928987;
  --color-neutral-600: #7b7271;
  --color-neutral-700: #625a59;
  --color-neutral-800: #4a4342;
  --color-neutral-900: #312c2c;
  --color-neutral-950: #1c1818;
  --color-base-black: #000000;
  --color-base-white: #ffffff;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --stroke-hairline: 1px;
  --stroke-control: 1.5px;
  --stroke-focus: 2px;
}

:root,
[data-surface="ink"] {
  --surface-canvas: var(--color-base-black);
  --surface-raised: var(--color-neutral-950);
  --surface-sunken: var(--color-neutral-900);
  --surface-frame: var(--color-red-500);
  --text-primary: var(--color-base-white);
  --text-secondary: var(--color-neutral-200);
  --text-tertiary: var(--color-neutral-300);
  --text-accent: var(--color-red-500);
  --border-strong: var(--color-base-white);
  --border-default: var(--color-neutral-600);
  --border-subtle: var(--color-neutral-800);
  --border-focus: var(--color-red-500);
  --surface-glass: rgb(0 0 0 / 0.6);
  --border-glass: rgb(255 255 255 / 0.122);
  --field-fill: var(--color-neutral-950);
  --field-text: var(--color-base-white);
  --field-hint: var(--color-neutral-200);
  --field-error: var(--color-red-500);
}

[data-surface="red"] {
  --surface-canvas: var(--color-red-500);
  --surface-raised: var(--color-neutral-950);
  --surface-sunken: var(--color-red-600);
  --surface-frame: var(--color-red-500);
  --text-primary: var(--color-base-white);
  --text-secondary: var(--color-base-white);
  --text-tertiary: var(--color-base-white);
  --text-accent: var(--color-base-black);
  --border-strong: var(--color-base-white);
  --border-default: var(--color-base-black);
  --border-subtle: var(--color-red-600);
  --border-focus: var(--color-base-white);
  --surface-glass: rgb(0 0 0 / 0.6);
  --border-glass: rgb(255 255 255 / 0.122);
  --field-fill: var(--color-base-black);
  --field-text: var(--color-base-white);
  --field-hint: var(--color-neutral-200);
  --field-error: var(--color-base-white);
}

[data-surface="paper"] {
  --surface-canvas: var(--color-base-white);
  --surface-raised: var(--color-neutral-50);
  --surface-sunken: var(--color-neutral-100);
  --surface-frame: var(--color-red-500);
  --text-primary: var(--color-neutral-950);
  --text-secondary: var(--color-neutral-800);
  --text-tertiary: var(--color-neutral-700);
  --text-accent: var(--color-red-500);
  --border-strong: var(--color-neutral-950);
  --border-default: var(--color-neutral-500);
  --border-subtle: var(--color-neutral-200);
  --border-focus: var(--color-red-500);
  --surface-glass: rgb(0 0 0 / 0.6);
  --border-glass: rgb(255 255 255 / 0.122);
  --field-fill: var(--color-neutral-50);
  --field-text: var(--color-neutral-950);
  --field-hint: var(--color-neutral-800);
  --field-error: var(--color-red-500);
}

:root {
  --font-family-brand: "Outfit", system-ui, sans-serif;
  --font-family-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-display-xl: 132px;
  --font-size-display-l: 80px;
  --font-size-heading-1: 56px;
  --font-size-heading-2: 40px;
  --font-size-heading-3: 24px;
  --font-size-nav: 48px;
  --font-size-body-lead: 28px;
  --font-size-body-m: 17px;
  --font-size-body-s: 14px;
  --font-size-label: 14px;
  --font-size-caption: 12px;
  --layout-frame: 24px;
  --layout-margin: 80px;
  --layout-gutter: 24px;
  --layout-columns: 12;
  --layout-section-y: 128px;
  --layout-inset: 56px;
  --font-size-button: 20px;
  --font-size-body-article: 20px;
}

@media (max-width: 1199px) {
  :root {
    --font-family-brand: "Outfit", system-ui, sans-serif;
    --font-family-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-size-display-xl: 96px;
    --font-size-display-l: 68px;
    --font-size-heading-1: 48px;
    --font-size-heading-2: 33px;
    --font-size-heading-3: 24px;
    --font-size-nav: 40px;
    --font-size-body-lead: 24px;
    --font-size-body-m: 17px;
    --font-size-body-s: 14px;
    --font-size-label: 14px;
    --font-size-caption: 12px;
    --layout-frame: 24px;
    --layout-margin: 64px;
    --layout-gutter: 16px;
    --layout-columns: 8;
    --layout-section-y: 96px;
    --layout-inset: 40px;
    --font-size-button: 20px;
    --font-size-body-article: 20px;
}

}

@media (max-width: 767px) {
  :root {
    --font-family-brand: "Outfit", system-ui, sans-serif;
    --font-family-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-size-display-xl: 56px;
    --font-size-display-l: 40px;
    --font-size-heading-1: 33px;
    --font-size-heading-2: 28px;
    --font-size-heading-3: 20px;
    --font-size-nav: 28px;
    --font-size-body-lead: 20px;
    --font-size-body-m: 17px;
    --font-size-body-s: 14px;
    --font-size-label: 12px;
    --font-size-caption: 12px;
    --layout-frame: 20px;
    --layout-margin: 44px;
    --layout-gutter: 12px;
    --layout-columns: 4;
    --layout-section-y: 64px;
    --layout-inset: 24px;
    --font-size-button: 20px;
    --font-size-body-article: 18px;
}

}

:root {
  --motion-entrance-duration: 700ms;
  --motion-entrance-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-word-duration: 600ms;
  --motion-word-hold: 1400ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-focus-blur: 10px;
  --motion-tilt-max: 6deg;
}

:root {
  --effect-elevation-raised: 0 24px 48px -12px rgba(0,0,0,0.28);
  --effect-glass-blur: 16px;
  --effect-focus-blur: 10px;
}

.t-display-xl {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-display-xl);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.t-display-l {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-display-l);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.t-heading-1 {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-heading-1);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.t-heading-1-light {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-heading-1);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.t-heading-2 {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-heading-2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.t-heading-3 {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-heading-3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.t-nav-menu {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-nav);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.t-body-lead {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-body-lead);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.t-body-m {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-body-m);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0em;
}

.t-body-s {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-body-s);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0em;
}

.t-label {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.t-caption {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-caption);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0em;
}

.t-mono-data {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0em;
}

.t-mono-eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.t-button {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-button);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0em;
}

.t-body-strong {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-button);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0em;
}

.t-body-article {
  font-family: var(--font-family-brand);
  font-size: var(--font-size-body-article);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0em;
}