@layer tokens {
  :root {
    color-scheme: light dark;

    --color-neutral-0: #FFFFFF;
    --color-neutral-50: #F5F5F7;
    --color-neutral-100: #ECECEE;
    --color-neutral-200: #D2D2D7;
    --color-neutral-300: #BDBDC2;
    --color-neutral-400: #A1A1A6;
    --color-neutral-500: #86868B;
    --color-neutral-600: #6E6E73;
    --color-neutral-700: #424245;
    --color-neutral-800: #2C2C2E;
    --color-neutral-900: #1D1D1F;
    --color-neutral-950: #000000;
    --color-brand-300: #9FCBFF;
    --color-brand-400: #4DA3F0;
    --color-brand-500: #0071E3;
    --color-brand-600: #0066CC;
    --color-brand-700: #0052A3;
    --color-accent-400: #FFD426;
    --color-accent-500: #FF9F0A;
    --color-accent-600: #C77700;
    --color-danger-400: #FF6961;
    --color-danger-500: #FF3B30;
    --color-danger-600: #D70015;
    --color-success-500: #30D158;
    --space-0: 0;
    --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;
    --radius-none: 0;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --border-width-thin: 1px;
    --border-width-thick: 2px;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 17px;
    --font-size-lg: 21px;
    --font-size-xl: 29px;
    --font-size-2xl: 42px;
    --font-size-3xl: 56px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-family-sans: "Inter";
    --font-family-mono: "Roboto Mono";
    --color-violet-400: #C68CFF;
    --color-violet-500: #B96AFF;
    --color-violet-600: #9A4BE0;
    --color-brand-50: #F5F7FF;
    --color-neutral-25: #FBFBFD;
    --color-neutral-925: #17181B;
    --color-brand-550: #0077ED;
    --color-traffic-red: #FF5F57;
    --color-traffic-amber: #FEBC2E;
    --color-traffic-green: #28C840;

    --bg-canvas: light-dark(var(--color-neutral-50), var(--color-neutral-950));
    --bg-surface: light-dark(var(--color-neutral-0), var(--color-neutral-900));
    --bg-raised: light-dark(var(--color-neutral-100), var(--color-neutral-800));
    --bg-inverse: light-dark(var(--color-neutral-900), var(--color-neutral-50));
    --bg-brand-solid: var(--color-brand-500);
    --bg-danger-solid: var(--color-danger-500);
    --bg-qr: var(--color-neutral-0);
    --fg-default: light-dark(var(--color-neutral-900), var(--color-neutral-50));
    --fg-muted: light-dark(var(--color-neutral-600), var(--color-neutral-400));
    --fg-subtle: var(--color-neutral-500);
    --fg-inverse: light-dark(var(--color-neutral-0), var(--color-neutral-950));
    --fg-onbrand: var(--color-neutral-0);
    --fg-brand: light-dark(var(--color-brand-600), var(--color-brand-400));
    --fg-danger: light-dark(var(--color-danger-600), var(--color-danger-400));
    --border-default: light-dark(var(--color-neutral-200), var(--color-neutral-700));
    --border-strong: light-dark(var(--color-neutral-300), var(--color-neutral-600));
    --border-brand: var(--color-brand-500);
    --border-danger: var(--color-danger-500);
    --status-live: var(--color-success-500);
    --status-expiring: light-dark(var(--color-accent-600), var(--color-accent-500));
    --status-expired: light-dark(var(--color-neutral-400), var(--color-neutral-500));
    --radius-control: var(--radius-md);
    --radius-surface: var(--radius-lg);
    --radius-dropzone: var(--radius-xl);
    --radius-badge: var(--radius-pill);
    --space-inline-sm: var(--space-2);
    --space-inline-md: var(--space-3);
    --space-stack-sm: var(--space-3);
    --space-stack-md: var(--space-5);
    --space-stack-lg: var(--space-6);
    --space-section: var(--space-9);
    --padding-control: var(--space-4);
    --padding-surface: var(--space-6);
    --text-display: var(--font-size-3xl);
    --text-title: var(--font-size-xl);
    --text-body: var(--font-size-md);
    --text-label: var(--font-size-sm);
    --text-caption: var(--font-size-xs);
    --bg-brand-subtle: light-dark(var(--color-brand-50), var(--color-brand-700));
    --fg-onbrand-subtle: light-dark(var(--color-brand-600), var(--color-brand-300));
    --fg-accent: light-dark(var(--color-violet-600), var(--color-violet-400));
    --radius-button: var(--radius-pill);
    --bg-surface-alt: light-dark(var(--color-neutral-25), var(--color-neutral-800));
    --bg-ink: var(--color-neutral-925);
    --bg-brand-hover: light-dark(var(--color-brand-550), var(--color-brand-400));
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}