/* GENERATED by scripts/build-tokens.mjs — do not edit by hand.
   Source: Figma variables — New Design system Demo
   Names match codeSyntax.WEB on the Figma variables, one for one. */

:root {
  /* ---- reference tier: raw values, rarely consumed directly ---- */
  --vw-ref-color-yellow-100: #fff1be;
  --vw-ref-color-yellow-400: #ffdd00;
  --vw-ref-color-yellow-450: #eacb00;
  --vw-ref-color-yellow-500: #ffc300;
  --vw-ref-color-yellow-700: #b39b00;
  --vw-ref-color-yellow-800: #b38900;
  --vw-ref-color-yellow-900: #7a5c00;
  --vw-ref-color-neutral-0: #ffffff;
  --vw-ref-color-neutral-50: #f2f2f2;
  --vw-ref-color-neutral-100: #e6e6e6;
  --vw-ref-color-neutral-200: #d9d9d9;
  --vw-ref-color-neutral-300: #bfbfbf;
  --vw-ref-color-neutral-400: #999999;
  --vw-ref-color-neutral-500: #767676;
  --vw-ref-color-neutral-600: #5a5a5a;
  --vw-ref-color-neutral-700: #404040;
  --vw-ref-color-neutral-800: #272727;
  --vw-ref-color-neutral-850: #212121;
  --vw-ref-color-neutral-880: #171717;
  --vw-ref-color-neutral-890: #121212;
  --vw-ref-color-neutral-900: #000000;
  --vw-ref-color-blue-100: #d0e1ee;
  --vw-ref-color-blue-300: #4da6f7;
  --vw-ref-color-blue-500: #0a8cf2;
  --vw-ref-color-blue-700: #0859a6;
  --vw-ref-color-green-100: #c9f1e8;
  --vw-ref-color-green-500: #049d79;
  --vw-ref-color-green-800: #025240;
  --vw-ref-color-red-50: #ffe2e2;
  --vw-ref-color-red-100: #f6ddd5;
  --vw-ref-color-red-200: #ffb7b7;
  --vw-ref-color-red-300: #ed967b;
  --vw-ref-color-red-600: #cd0000;
  --vw-ref-color-red-700: #a52603;
  --vw-ref-color-red-800: #8e3737;
  --vw-ref-color-red-850: #710f0f;
  --vw-ref-color-red-900: #5a1502;
  --vw-ref-color-shadow-10: #0000001a;
  --vw-ref-color-shadow-18: #0000002e;
  --vw-ref-color-shadow-32: #00000052;
  --vw-ref-color-shadow-48: #0000007a;
  --vw-ref-color-shadow-64: #000000a3;
  --vw-ref-color-transparent: #00000000;
  --vw-ref-color-scrim-64: #000000a3;
  --vw-ref-color-scrim-72: #000000b8;
  --vw-ref-color-veil-70: #ffffffb3;
  --vw-ref-space-none: 0px;
  --vw-ref-space-xs: 4px;
  --vw-ref-space-sm: 8px;
  --vw-ref-space-md: 12px;
  --vw-ref-space-lg: 16px;
  --vw-ref-space-xl: 24px;
  --vw-ref-space-2xl: 32px;
  --vw-ref-space-3xl: 40px;
  --vw-ref-space-4xl: 48px;
  --vw-ref-space-5xl: 64px;
  --vw-ref-space-2xs: 2px;
  --vw-ref-space-xs-plus: 6px;
  --vw-ref-radius-none: 0px;
  --vw-ref-radius-xs: 4px;
  --vw-ref-radius-sm: 8px;
  --vw-ref-radius-md: 12px;
  --vw-ref-radius-lg: 16px;
  --vw-ref-radius-pill: 48px;
  --vw-ref-radius-full: 999px;
  --vw-ref-radius-xs-plus: 6px;
  --vw-ref-font-size-xs: 12px;
  --vw-ref-font-size-sm: 14px;
  --vw-ref-font-size-md: 16px;
  --vw-ref-font-size-lg: 20px;
  --vw-ref-font-size-xl: 24px;
  --vw-ref-font-size-2xl: 32px;
  --vw-ref-font-size-3xl: 40px;
  --vw-ref-font-size-4xl: 64px;
  --vw-ref-line-height-xs: 16px;
  --vw-ref-line-height-sm: 18px;
  --vw-ref-line-height-md: 22px;
  --vw-ref-line-height-lg: 24px;
  --vw-ref-line-height-xl: 26px;
  --vw-ref-line-height-2xl: 28px;
  --vw-ref-line-height-3xl: 36px;
  --vw-ref-line-height-4xl: 46px;
  --vw-ref-line-height-5xl: 64px;
  --vw-ref-font-family-display: Archivo;
  --vw-ref-font-family-body: Roboto;
  --vw-ref-elevation-sm-y: 2px;
  --vw-ref-elevation-sm-blur: 8px;
  --vw-ref-elevation-md-y: 8px;
  --vw-ref-elevation-md-blur: 24px;
  --vw-ref-elevation-lg-y: 16px;
  --vw-ref-elevation-lg-blur: 40px;
  --vw-ref-icon-size-sm: 16px;
  --vw-ref-icon-size-md: 20px;
  --vw-ref-icon-size-lg: 24px;
  --vw-ref-motion-duration-instant: 100ms;
  --vw-ref-motion-duration-fast: 150ms;
  --vw-ref-motion-duration-base: 250ms;
  --vw-ref-motion-duration-slow: 400ms;
  --vw-ref-motion-duration-enter: 450ms;
  --vw-ref-motion-duration-toggle: 200ms;
  --vw-ref-motion-duration-gentle: 800ms;
  --vw-ref-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --vw-ref-motion-ease-enter: cubic-bezier(0, 0, 0, 1);
  --vw-ref-motion-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --vw-ref-motion-ease-gentle: cubic-bezier(0.22, 1, 0.36, 1);
  --vw-ref-motion-stagger-tight: 40ms;
  --vw-ref-motion-stagger-base: 60ms;
  --vw-ref-motion-stagger-loose: 150ms;
  --vw-ref-motion-travel-parallax: 72px;
  --vw-ref-blur-veil: 8px;
  --vw-ref-blur-hint: 3px;
  --vw-ref-border-width-hairline: 1px;
  --vw-ref-border-width-thin: 1px;
  --vw-ref-border-width-thick: 2px;

  /* ---- system tier: mode-invariant ---- */
  --vw-surface-brand: var(--vw-ref-color-yellow-400);
  --vw-surface-fixed-dark: var(--vw-ref-color-neutral-900);
  --vw-surface-brand-bar: var(--vw-ref-color-yellow-450);
  --vw-text-on-brand: var(--vw-ref-color-neutral-900);
  --vw-text-on-fixed-dark: var(--vw-ref-color-neutral-0);
  --vw-text-on-fixed-dark-secondary: var(--vw-ref-color-neutral-400);
  --vw-text-on-media: var(--vw-ref-color-neutral-0);
  --vw-text-on-media-secondary: var(--vw-ref-color-neutral-200);
  --vw-border-on-fixed-dark: var(--vw-ref-color-neutral-700);
  --vw-border-on-brand: var(--vw-ref-color-neutral-890);
  --vw-action-primary-bg: var(--vw-ref-color-yellow-400);
  --vw-action-primary-bg-hover: var(--vw-ref-color-yellow-500);
  --vw-action-primary-bg-active: var(--vw-ref-color-yellow-100);
  --vw-action-primary-fg: var(--vw-ref-color-neutral-900);
  --vw-action-primary-fg-disabled: var(--vw-ref-color-neutral-400);
  --vw-action-secondary-fg-disabled: var(--vw-ref-color-neutral-400);
  --vw-action-tertiary-bg: var(--vw-ref-color-transparent);
  --vw-action-tertiary-bg-disabled: var(--vw-ref-color-transparent);
  --vw-action-tertiary-fg-disabled: var(--vw-ref-color-neutral-400);
  --vw-feedback-warning-bg: var(--vw-ref-color-yellow-900);
  --vw-feedback-warning-fg: var(--vw-ref-color-yellow-100);
  --vw-radius-control: var(--vw-ref-radius-sm);
  --vw-radius-container: var(--vw-ref-radius-lg);
  --vw-radius-pill: var(--vw-ref-radius-pill);
  --vw-radius-key: var(--vw-ref-radius-xs-plus);
  --vw-type-page-title-size: var(--vw-ref-font-size-3xl);
  --vw-type-page-title-line: var(--vw-ref-line-height-4xl);
  --vw-type-section-title-size: var(--vw-ref-font-size-2xl);
  --vw-type-section-title-line: var(--vw-ref-line-height-3xl);
  --vw-type-subsection-title-size: var(--vw-ref-font-size-xl);
  --vw-type-subsection-title-line: var(--vw-ref-line-height-2xl);
  --vw-type-card-title-size: var(--vw-ref-font-size-lg);
  --vw-type-card-title-line: var(--vw-ref-line-height-lg);
  --vw-type-lead-size: var(--vw-ref-font-size-lg);
  --vw-type-lead-line: var(--vw-ref-line-height-xl);
  --vw-type-action-label-size: var(--vw-ref-font-size-md);
  --vw-type-action-label-line: var(--vw-ref-line-height-lg);
  --vw-type-overline-size: var(--vw-ref-font-size-xs);
  --vw-type-overline-line: var(--vw-ref-line-height-xs);
  --vw-type-body-size: var(--vw-ref-font-size-md);
  --vw-type-body-line: var(--vw-ref-line-height-md);
  --vw-type-body-compact-size: var(--vw-ref-font-size-sm);
  --vw-type-body-compact-line: var(--vw-ref-line-height-sm);
  --vw-type-caption-size: var(--vw-ref-font-size-xs);
  --vw-type-caption-line: var(--vw-ref-line-height-xs);
  --vw-type-hero-title-size: var(--vw-ref-font-size-4xl);
  --vw-type-hero-title-line: var(--vw-ref-line-height-5xl);
  --vw-space-keypad-gutter: var(--vw-ref-space-xs-plus);

  /* ---- typography roles ---- */
  --vw-font-display-h3: 600 var(--vw-type-page-title-size)/var(--vw-type-page-title-line) var(--vw-ref-font-family-display), system-ui, sans-serif;
  --vw-font-display-h4: 600 var(--vw-type-section-title-size)/var(--vw-type-section-title-line) var(--vw-ref-font-family-display), system-ui, sans-serif;
  --vw-font-display-h5: 600 var(--vw-type-subsection-title-size)/var(--vw-type-subsection-title-line) var(--vw-ref-font-family-display), system-ui, sans-serif;
  --vw-font-display-h6: 600 var(--vw-type-card-title-size)/var(--vw-type-card-title-line) var(--vw-ref-font-family-display), system-ui, sans-serif;
  --vw-font-title-04: 500 var(--vw-type-lead-size)/var(--vw-type-lead-line) var(--vw-ref-font-family-body), system-ui, sans-serif;
  --vw-font-label-01: 500 var(--vw-type-action-label-size)/var(--vw-type-action-label-line) var(--vw-ref-font-family-display), system-ui, sans-serif;
  --vw-font-label-02: 500 var(--vw-type-overline-size)/var(--vw-type-overline-line) var(--vw-ref-font-family-display), system-ui, sans-serif;
  --vw-font-body-01: 400 var(--vw-type-body-size)/var(--vw-type-body-line) var(--vw-ref-font-family-body), system-ui, sans-serif;
  --vw-font-body-02: 400 var(--vw-type-body-compact-size)/var(--vw-type-body-compact-line) var(--vw-ref-font-family-body), system-ui, sans-serif;
  --vw-font-body-03: 400 var(--vw-type-caption-size)/var(--vw-type-caption-line) var(--vw-ref-font-family-body), system-ui, sans-serif;
  --vw-font-display-h2: 600 var(--vw-type-hero-title-size)/var(--vw-type-hero-title-line) var(--vw-ref-font-family-display), system-ui, sans-serif;
}

/* ---- system tier: light, on the root and on any nested light scope ---- */
:root,
[data-theme='light'] {
  color-scheme: light;

  --vw-surface-page: var(--vw-ref-color-neutral-0);
  --vw-surface-raised: var(--vw-ref-color-neutral-0);
  --vw-surface-sunken: var(--vw-ref-color-neutral-50);
  --vw-surface-inverse: var(--vw-ref-color-neutral-900);
  --vw-surface-disabled: var(--vw-ref-color-neutral-100);
  --vw-surface-brand-veil: var(--vw-ref-color-veil-70);
  --vw-surface-media-veil: var(--vw-ref-color-neutral-50);
  --vw-surface-inset: var(--vw-ref-color-neutral-50);
  --vw-surface-inset-on-brand: var(--vw-ref-color-neutral-50);
  --vw-text-primary: var(--vw-ref-color-neutral-900);
  --vw-text-secondary: var(--vw-ref-color-neutral-600);
  --vw-text-disabled: var(--vw-ref-color-neutral-400);
  --vw-text-inverse: var(--vw-ref-color-neutral-0);
  --vw-text-inverse-secondary: var(--vw-ref-color-neutral-400);
  --vw-text-link: var(--vw-ref-color-blue-700);
  --vw-border-subtle: var(--vw-ref-color-neutral-100);
  --vw-border-default: var(--vw-ref-color-neutral-500);
  --vw-border-strong: var(--vw-ref-color-neutral-900);
  --vw-border-focus: var(--vw-ref-color-blue-500);
  --vw-border-inverse: var(--vw-ref-color-neutral-700);
  --vw-action-primary-bg-disabled: var(--vw-ref-color-neutral-100);
  --vw-action-secondary-bg: var(--vw-ref-color-neutral-900);
  --vw-action-secondary-bg-hover: var(--vw-ref-color-neutral-800);
  --vw-action-secondary-bg-active: var(--vw-ref-color-neutral-700);
  --vw-action-secondary-bg-disabled: var(--vw-ref-color-neutral-100);
  --vw-action-secondary-fg: var(--vw-ref-color-neutral-0);
  --vw-action-tertiary-bg-hover: var(--vw-ref-color-neutral-50);
  --vw-action-tertiary-bg-active: var(--vw-ref-color-neutral-100);
  --vw-action-tertiary-fg: var(--vw-ref-color-neutral-900);
  --vw-feedback-info-bg: var(--vw-ref-color-blue-100);
  --vw-feedback-info-fg: var(--vw-ref-color-blue-700);
  --vw-feedback-success-bg: var(--vw-ref-color-green-100);
  --vw-feedback-success-fg: var(--vw-ref-color-green-800);
  --vw-feedback-error-bg: var(--vw-ref-color-red-100);
  --vw-feedback-error-fg: var(--vw-ref-color-red-700);
  --vw-feedback-error-surface: var(--vw-ref-color-red-50);
  --vw-feedback-error-inset: var(--vw-ref-color-red-200);
  --vw-feedback-error-text: var(--vw-ref-color-red-600);
  --vw-feedback-error-text-secondary: var(--vw-ref-color-red-700);
  --vw-shadow-sm: var(--vw-ref-color-shadow-10);
  --vw-shadow-md: var(--vw-ref-color-shadow-18);
  --vw-shadow-lg: var(--vw-ref-color-shadow-32);
  --vw-syntax-key: var(--vw-ref-color-blue-700);
  --vw-syntax-string: var(--vw-ref-color-green-800);
  --vw-syntax-number: var(--vw-ref-color-yellow-900);
  --vw-syntax-literal: var(--vw-ref-color-red-700);
  --vw-syntax-punctuation: var(--vw-ref-color-neutral-600);
  --vw-indicator-active: var(--vw-ref-color-neutral-400);
  --vw-indicator-inactive: var(--vw-ref-color-neutral-200);

  /* ---- composite ---- */
  --vw-elevation-sm: 0 2px 8px 0 var(--vw-shadow-sm);
  --vw-elevation-md: 0 8px 24px 0 var(--vw-shadow-md);
  --vw-elevation-lg: 0 16px 40px 0 var(--vw-shadow-lg);
}

[data-theme='dark'] {
  color-scheme: dark;

  --vw-surface-page: var(--vw-ref-color-neutral-800);
  --vw-surface-raised: var(--vw-ref-color-neutral-700);
  --vw-surface-sunken: var(--vw-ref-color-neutral-880);
  --vw-surface-inverse: var(--vw-ref-color-neutral-0);
  --vw-surface-disabled: var(--vw-ref-color-neutral-600);
  --vw-surface-brand-veil: var(--vw-ref-color-scrim-72);
  --vw-surface-media-veil: var(--vw-ref-color-neutral-900);
  --vw-surface-inset: var(--vw-ref-color-neutral-850);
  --vw-surface-inset-on-brand: var(--vw-ref-color-neutral-600);
  --vw-text-primary: var(--vw-ref-color-neutral-0);
  --vw-text-secondary: var(--vw-ref-color-neutral-300);
  --vw-text-disabled: var(--vw-ref-color-neutral-600);
  --vw-text-inverse: var(--vw-ref-color-neutral-900);
  --vw-text-inverse-secondary: var(--vw-ref-color-neutral-600);
  --vw-text-link: var(--vw-ref-color-blue-300);
  --vw-border-subtle: var(--vw-ref-color-neutral-600);
  --vw-border-default: var(--vw-ref-color-neutral-400);
  --vw-border-strong: var(--vw-ref-color-neutral-0);
  --vw-border-focus: var(--vw-ref-color-blue-300);
  --vw-border-inverse: var(--vw-ref-color-neutral-300);
  --vw-action-primary-bg-disabled: var(--vw-ref-color-neutral-600);
  --vw-action-secondary-bg: var(--vw-ref-color-neutral-0);
  --vw-action-secondary-bg-hover: var(--vw-ref-color-neutral-50);
  --vw-action-secondary-bg-active: var(--vw-ref-color-neutral-100);
  --vw-action-secondary-bg-disabled: var(--vw-ref-color-neutral-600);
  --vw-action-secondary-fg: var(--vw-ref-color-neutral-900);
  --vw-action-tertiary-bg-hover: var(--vw-ref-color-neutral-700);
  --vw-action-tertiary-bg-active: var(--vw-ref-color-neutral-600);
  --vw-action-tertiary-fg: var(--vw-ref-color-neutral-0);
  --vw-feedback-info-bg: var(--vw-ref-color-blue-700);
  --vw-feedback-info-fg: var(--vw-ref-color-blue-100);
  --vw-feedback-success-bg: var(--vw-ref-color-green-800);
  --vw-feedback-success-fg: var(--vw-ref-color-green-100);
  --vw-feedback-error-bg: var(--vw-ref-color-red-900);
  --vw-feedback-error-fg: var(--vw-ref-color-red-100);
  --vw-feedback-error-surface: var(--vw-ref-color-red-800);
  --vw-feedback-error-inset: var(--vw-ref-color-red-850);
  --vw-feedback-error-text: var(--vw-ref-color-neutral-0);
  --vw-feedback-error-text-secondary: var(--vw-ref-color-red-300);
  --vw-shadow-sm: var(--vw-ref-color-shadow-32);
  --vw-shadow-md: var(--vw-ref-color-shadow-48);
  --vw-shadow-lg: var(--vw-ref-color-shadow-64);
  --vw-syntax-key: var(--vw-ref-color-blue-300);
  --vw-syntax-string: var(--vw-ref-color-green-100);
  --vw-syntax-number: var(--vw-ref-color-yellow-100);
  --vw-syntax-literal: var(--vw-ref-color-red-100);
  --vw-syntax-punctuation: var(--vw-ref-color-neutral-400);
  --vw-indicator-active: var(--vw-ref-color-neutral-200);
  --vw-indicator-inactive: var(--vw-ref-color-neutral-880);

  --vw-elevation-sm: 0 2px 8px 0 var(--vw-shadow-sm);
  --vw-elevation-md: 0 8px 24px 0 var(--vw-shadow-md);
  --vw-elevation-lg: 0 16px 40px 0 var(--vw-shadow-lg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --vw-surface-page: var(--vw-ref-color-neutral-800);
    --vw-surface-raised: var(--vw-ref-color-neutral-700);
    --vw-surface-sunken: var(--vw-ref-color-neutral-880);
    --vw-surface-inverse: var(--vw-ref-color-neutral-0);
    --vw-surface-disabled: var(--vw-ref-color-neutral-600);
    --vw-surface-brand-veil: var(--vw-ref-color-scrim-72);
    --vw-surface-media-veil: var(--vw-ref-color-neutral-900);
    --vw-surface-inset: var(--vw-ref-color-neutral-850);
    --vw-surface-inset-on-brand: var(--vw-ref-color-neutral-600);
    --vw-text-primary: var(--vw-ref-color-neutral-0);
    --vw-text-secondary: var(--vw-ref-color-neutral-300);
    --vw-text-disabled: var(--vw-ref-color-neutral-600);
    --vw-text-inverse: var(--vw-ref-color-neutral-900);
    --vw-text-inverse-secondary: var(--vw-ref-color-neutral-600);
    --vw-text-link: var(--vw-ref-color-blue-300);
    --vw-border-subtle: var(--vw-ref-color-neutral-600);
    --vw-border-default: var(--vw-ref-color-neutral-400);
    --vw-border-strong: var(--vw-ref-color-neutral-0);
    --vw-border-focus: var(--vw-ref-color-blue-300);
    --vw-border-inverse: var(--vw-ref-color-neutral-300);
    --vw-action-primary-bg-disabled: var(--vw-ref-color-neutral-600);
    --vw-action-secondary-bg: var(--vw-ref-color-neutral-0);
    --vw-action-secondary-bg-hover: var(--vw-ref-color-neutral-50);
    --vw-action-secondary-bg-active: var(--vw-ref-color-neutral-100);
    --vw-action-secondary-bg-disabled: var(--vw-ref-color-neutral-600);
    --vw-action-secondary-fg: var(--vw-ref-color-neutral-900);
    --vw-action-tertiary-bg-hover: var(--vw-ref-color-neutral-700);
    --vw-action-tertiary-bg-active: var(--vw-ref-color-neutral-600);
    --vw-action-tertiary-fg: var(--vw-ref-color-neutral-0);
    --vw-feedback-info-bg: var(--vw-ref-color-blue-700);
    --vw-feedback-info-fg: var(--vw-ref-color-blue-100);
    --vw-feedback-success-bg: var(--vw-ref-color-green-800);
    --vw-feedback-success-fg: var(--vw-ref-color-green-100);
    --vw-feedback-error-bg: var(--vw-ref-color-red-900);
    --vw-feedback-error-fg: var(--vw-ref-color-red-100);
    --vw-feedback-error-surface: var(--vw-ref-color-red-800);
    --vw-feedback-error-inset: var(--vw-ref-color-red-850);
    --vw-feedback-error-text: var(--vw-ref-color-neutral-0);
    --vw-feedback-error-text-secondary: var(--vw-ref-color-red-300);
    --vw-shadow-sm: var(--vw-ref-color-shadow-32);
    --vw-shadow-md: var(--vw-ref-color-shadow-48);
    --vw-shadow-lg: var(--vw-ref-color-shadow-64);
    --vw-syntax-key: var(--vw-ref-color-blue-300);
    --vw-syntax-string: var(--vw-ref-color-green-100);
    --vw-syntax-number: var(--vw-ref-color-yellow-100);
    --vw-syntax-literal: var(--vw-ref-color-red-100);
    --vw-syntax-punctuation: var(--vw-ref-color-neutral-400);
    --vw-indicator-active: var(--vw-ref-color-neutral-200);
    --vw-indicator-inactive: var(--vw-ref-color-neutral-880);

    --vw-elevation-sm: 0 2px 8px 0 var(--vw-shadow-sm);
    --vw-elevation-md: 0 8px 24px 0 var(--vw-shadow-md);
    --vw-elevation-lg: 0 16px 40px 0 var(--vw-shadow-lg);
  }
}