/* Generated from the Figma variables by scripts/tokens.mjs. Do not edit by hand. */

:root {
  --prim-ink: #141414;
  --prim-paper: #F4F3EF;
  --prim-vermilion-bright: #E43C12;
  --prim-vermilion-deep: #CC2C00;
  --prim-white: #FFFFFF;
  --prim-neutral-1: #ECEBE7;
  --prim-neutral-2: #E5E4E0;
  --prim-neutral-3: #DADAD6;
  --prim-neutral-4: #CBCAC7;
  --prim-neutral-5: #AEADAA;
  --prim-neutral-6: #858583;
  --prim-neutral-7: #686866;
  --prim-neutral-8: #4A4A49;
  --prim-neutral-9: #2E2E2D;
  --prim-lime-bright: #EEFF00;
  --prim-lime-green: #D4F000;
  --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;
  --font-display: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-text: "IBM Plex Serif", Georgia, serif;
}

:root, .theme-paper {
  --color-text-primary: var(--prim-ink);
  --color-text-secondary: var(--prim-neutral-7);
  --color-text-inverse: var(--prim-white);
  --color-surface-default: var(--prim-paper);
  --color-surface-muted: var(--prim-neutral-1);
  --color-surface-inverse: var(--prim-vermilion-deep);
  --color-border-default: var(--prim-neutral-3);
  --color-border-strong: var(--prim-ink);
  --color-accent: var(--prim-vermilion-bright);
  --color-accent-hover: var(--prim-vermilion-deep);
  --color-surface-section: var(--prim-neutral-1);
  --color-surface-tile: var(--prim-white);
  --color-surface-raised: var(--prim-white);
  --color-link: var(--prim-vermilion-deep);
  --color-link-hover: var(--prim-ink);
  --color-highlight: var(--prim-lime-bright);
  --color-text-accent: var(--prim-vermilion-deep);
  --color-border-raised: var(--prim-white);
  --color-surface-accent: var(--prim-vermilion-bright);
  --color-surface-accent-deep: var(--prim-vermilion-deep);
  --color-button-primary: var(--prim-vermilion-deep);
  --color-button-primary-hover: var(--prim-ink);
  --color-button-primary-hover-label: var(--prim-white);
  --color-button-primary-hover-border: var(--prim-ink);
}

.theme-dark {
  --color-text-primary: var(--prim-white);
  --color-text-secondary: var(--prim-neutral-3);
  --color-text-inverse: var(--prim-ink);
  --color-surface-default: var(--prim-ink);
  --color-surface-muted: var(--prim-neutral-9);
  --color-surface-inverse: var(--prim-paper);
  --color-border-default: var(--prim-neutral-8);
  --color-border-strong: var(--prim-paper);
  --color-accent: var(--prim-vermilion-bright);
  --color-accent-hover: var(--prim-vermilion-bright);
  --color-surface-section: var(--prim-ink);
  --color-surface-tile: var(--prim-neutral-9);
  --color-surface-raised: var(--prim-neutral-9);
  --color-link: var(--prim-lime-bright);
  --color-link-hover: var(--prim-white);
  --color-highlight: var(--prim-lime-bright);
  --color-text-accent: var(--prim-lime-bright);
  --color-border-raised: var(--prim-neutral-8);
  --color-surface-accent: var(--prim-vermilion-bright);
  --color-surface-accent-deep: var(--prim-vermilion-deep);
  --color-button-primary: var(--prim-lime-bright);
  --color-button-primary-hover: var(--prim-ink);
  --color-button-primary-hover-label: var(--prim-lime-bright);
  --color-button-primary-hover-border: var(--prim-lime-bright);
}

.theme-neutral-a {
  --color-text-primary: var(--prim-ink);
  --color-text-secondary: var(--prim-neutral-7);
  --color-text-inverse: var(--prim-white);
  --color-surface-default: var(--prim-neutral-1);
  --color-surface-muted: var(--prim-neutral-2);
  --color-surface-inverse: var(--prim-vermilion-deep);
  --color-border-default: var(--prim-neutral-3);
  --color-border-strong: var(--prim-ink);
  --color-accent: var(--prim-vermilion-bright);
  --color-accent-hover: var(--prim-vermilion-deep);
  --color-surface-section: var(--prim-neutral-1);
  --color-surface-tile: var(--prim-white);
  --color-surface-raised: var(--prim-white);
  --color-link: var(--prim-vermilion-deep);
  --color-link-hover: var(--prim-ink);
  --color-highlight: var(--prim-lime-bright);
  --color-text-accent: var(--prim-vermilion-deep);
  --color-border-raised: var(--prim-white);
  --color-surface-accent: var(--prim-vermilion-bright);
  --color-surface-accent-deep: var(--prim-vermilion-deep);
  --color-button-primary: var(--prim-vermilion-deep);
  --color-button-primary-hover: var(--prim-ink);
  --color-button-primary-hover-label: var(--prim-white);
  --color-button-primary-hover-border: var(--prim-ink);
}

.theme-neutral-b {
  --color-text-primary: var(--prim-ink);
  --color-text-secondary: var(--prim-neutral-7);
  --color-text-inverse: var(--prim-white);
  --color-surface-default: var(--prim-neutral-2);
  --color-surface-muted: var(--prim-neutral-3);
  --color-surface-inverse: var(--prim-vermilion-deep);
  --color-border-default: var(--prim-neutral-4);
  --color-border-strong: var(--prim-ink);
  --color-accent: var(--prim-vermilion-bright);
  --color-accent-hover: var(--prim-vermilion-deep);
  --color-surface-section: var(--prim-neutral-2);
  --color-surface-tile: var(--prim-paper);
  --color-surface-raised: var(--prim-paper);
  --color-link: var(--prim-vermilion-deep);
  --color-link-hover: var(--prim-ink);
  --color-highlight: var(--prim-lime-bright);
  --color-text-accent: var(--prim-vermilion-deep);
  --color-border-raised: var(--prim-white);
  --color-surface-accent: var(--prim-vermilion-bright);
  --color-surface-accent-deep: var(--prim-vermilion-deep);
  --color-button-primary: var(--prim-vermilion-deep);
  --color-button-primary-hover: var(--prim-ink);
  --color-button-primary-hover-label: var(--prim-white);
  --color-button-primary-hover-border: var(--prim-ink);
}

.theme-vermilion {
  --color-text-primary: var(--prim-white);
  --color-text-secondary: var(--prim-paper);
  --color-text-inverse: var(--prim-vermilion-deep);
  --color-surface-default: var(--prim-vermilion-deep);
  --color-surface-muted: var(--prim-vermilion-deep);
  --color-surface-inverse: var(--prim-white);
  --color-border-default: var(--prim-white);
  --color-border-strong: var(--prim-white);
  --color-accent: var(--prim-white);
  --color-accent-hover: var(--prim-paper);
  --color-surface-section: var(--prim-vermilion-deep);
  --color-surface-tile: var(--prim-vermilion-bright);
  --color-surface-raised: var(--prim-vermilion-bright);
  --color-link: var(--prim-white);
  --color-link-hover: var(--prim-paper);
  --color-highlight: var(--prim-lime-bright);
  --color-text-accent: var(--prim-lime-bright);
  --color-border-raised: var(--prim-white);
  --color-surface-accent: var(--prim-vermilion-bright);
  --color-surface-accent-deep: var(--prim-vermilion-deep);
  --color-button-primary: var(--prim-white);
  --color-button-primary-hover: var(--prim-paper);
  --color-button-primary-hover-label: var(--prim-vermilion-deep);
  --color-button-primary-hover-border: var(--prim-paper);
}

:root {
  --type-display: 44px;
  --type-h1: 36px;
  --type-h2: 28px;
  --type-h3: 20px;
  --type-lead: 20px;
  --type-body: 18px;
  --type-small: 15px;
  --type-label: 13px;
  --type-quote: 22px;
  --leading-display: 48px;
  --leading-h1: 40px;
  --leading-h2: 34px;
  --leading-h3: 27px;
  --leading-lead: 28px;
  --leading-body: 26px;
  --leading-small: 21px;
  --leading-label: 18px;
  --leading-quote: 30px;
  --layout-section-gap: 80px;
  --layout-block-gap: 24px;
  --layout-margin: 20px;
  --layout-gutter: 16px;
  --layout-max-width: 350px;
  --layout-section-padding: 56px;
}

@media (min-width: 744px) {
  :root {
    --type-display: 60px;
    --type-h1: 44px;
    --type-h2: 32px;
    --type-h3: 21px;
    --type-lead: 22px;
    --type-body: 19px;
    --type-small: 15px;
    --type-label: 13px;
    --type-quote: 25px;
    --leading-display: 64px;
    --leading-h1: 48px;
    --leading-h2: 38px;
    --leading-h3: 28px;
    --leading-lead: 31px;
    --leading-body: 27px;
    --leading-small: 21px;
    --leading-label: 18px;
    --leading-quote: 34px;
    --layout-section-gap: 112px;
    --layout-block-gap: 28px;
    --layout-margin: 32px;
    --layout-gutter: 20px;
    --layout-max-width: 770px;
    --layout-section-padding: 72px;
  }
}

@media (min-width: 1100px) {
  :root {
    --type-display: 80px;
    --type-h1: 56px;
    --type-h2: 36px;
    --type-h3: 22px;
    --type-lead: 24px;
    --type-body: 20px;
    --type-small: 16px;
    --type-label: 13px;
    --type-quote: 28px;
    --leading-display: 84px;
    --leading-h1: 60px;
    --leading-h2: 42px;
    --leading-h3: 30px;
    --leading-lead: 34px;
    --leading-body: 28px;
    --leading-small: 22px;
    --leading-label: 18px;
    --leading-quote: 38px;
    --layout-section-gap: 144px;
    --layout-block-gap: 32px;
    --layout-margin: 40px;
    --layout-gutter: 24px;
    --layout-max-width: 1360px;
    --layout-section-padding: 96px;
  }
}