/* ==========================================================================
   Design Tokens (generiert, nicht von Hand bearbeiten)
   Quelle: design-system/tokens.json  ·  Build: python3 design-system/scripts/build.py
   Namen sind identisch zu den Figma-Variablen: color/text/primary = --color-text-primary.
   Ebenen: Primitives (Rohwerte) -> Semantic (Rollen, light/dark) -> Component.
   Layout-Modes per Media Query: Mobile (Basis), Tablet ab 48em, Desktop ab 64em, Wide ab 90em.
   Dark Mode ist opt-in: <html data-theme="dark">. Die Website nutzt bisher nur Light.
   ========================================================================== */

/* ---------- Primitives ---------- */
:root {
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-transparent: rgb(0 0 0 / 0);

  --color-blue-50: #F5F7FB;
  --color-blue-100: #E7EDF9;
  --color-blue-200: #CEDBF6;
  --color-blue-300: #A3BDF5;
  --color-blue-400: #6D97F7;
  --color-blue-500: #3569FB;
  --color-blue-600: #0C1CFB;
  --color-blue-700: #0815D0;
  --color-blue-800: #0517A2;
  --color-blue-900: #031477;
  --color-blue-950: #020E51;

  --color-red-50: #FBF5F4;
  --color-red-100: #F9E9E6;
  --color-red-200: #F6CBC4;
  --color-red-300: #F8988B;
  --color-red-400: #FE2525;
  --color-red-500: #D50010;
  --color-red-600: #A2020A;
  --color-red-700: #880C0D;
  --color-red-800: #6A0E0C;
  --color-red-900: #4F0C0A;
  --color-red-950: #350806;

  --color-green-50: #EEFBED;
  --color-green-100: #D4F9D2;
  --color-green-200: #75F777;
  --color-green-300: #3DD646;
  --color-green-400: #00A51E;
  --color-green-500: #008817;
  --color-green-600: #01670F;
  --color-green-700: #095811;
  --color-green-800: #0C440F;
  --color-green-900: #0A320C;
  --color-green-950: #062107;

  --color-yellow-50: #FBF7E1;
  --color-yellow-100: #FAEDB0;
  --color-yellow-200: #FAD81B;
  --color-yellow-300: #D9BC1E;
  --color-yellow-400: #B39A10;
  --color-yellow-500: #8C780D;
  --color-yellow-600: #675805;
  --color-yellow-700: #544707;
  --color-yellow-800: #413809;
  --color-yellow-900: #302908;
  --color-yellow-950: #1F1B05;

  --color-purple-50: #FBF4FB;
  --color-purple-100: #F8E6F9;
  --color-purple-200: #F4C8F6;
  --color-purple-300: #F192F7;
  --color-purple-400: #EB1BFA;
  --color-purple-500: #BC04C9;
  --color-purple-600: #8C0496;
  --color-purple-700: #730C7B;
  --color-purple-800: #5A0E5F;
  --color-purple-900: #420C46;
  --color-purple-950: #2C082F;

  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F4F4F4;
  --color-neutral-200: #E5E6E8;
  --color-neutral-300: #D2D4D8;
  --color-neutral-400: #AEB1B6;
  --color-neutral-500: #86898F;
  --color-neutral-600: #696C72;
  --color-neutral-700: #505358;
  --color-neutral-800: #36383D;
  --color-neutral-900: #1B1D20;
  --color-neutral-950: #020202;

  --color-black-alpha-4: rgb(0 0 0 / 0.04);
  --color-black-alpha-5: rgb(0 0 0 / 0.05);
  --color-black-alpha-6: rgb(0 0 0 / 0.06);
  --color-black-alpha-10: rgb(0 0 0 / 0.1);
  --color-black-alpha-12: rgb(0 0 0 / 0.12);
  --color-black-alpha-40: rgb(0 0 0 / 0.4);

  --color-white-alpha-6: rgb(255 255 255 / 0.06);
  --color-white-alpha-14: rgb(255 255 255 / 0.14);
  --color-white-alpha-50: rgb(255 255 255 / 0.5);

  --color-blue-alpha-10: rgb(12 28 251 / 0.1);
  --color-blue-alpha-40: rgb(12 28 251 / 0.4);

  --font-family-sans: "TASA Orbiter", "Helvetica Neue", Arial, sans-serif;

  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-line-height-none: 1;
  --font-line-height-tight: 1.2;
  --font-line-height-snug: 1.25;
  --font-line-height-normal: 1.5;
  --font-line-height-relaxed: 1.3;

  --space-half: 0.125rem;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-30: 7.5rem;
  --space-50: 12.5rem;

  --radius-none: 0;
  --radius-small: 4px;
  --radius-large: 20px;
  --radius-xlarge: 52px;
  --radius-pill: 1000px;

  --border-width-thin: 1px;
  --border-width-thick: 2px;

  --size-icon-small: 1rem;
  --size-icon-medium: 1.25rem;
  --size-icon-large: 1.5rem;
  --size-icon-xlarge: 2rem;

  --size-logo: 2.25rem;

  --size-control-height: 2.25rem;

  --size-hotkey-width: 1.5625rem;
  --size-hotkey-height: 1.4375rem;

  --size-sheet-bar: 4.4375rem;

  --size-project-media-width: 18.75rem;
  --size-project-media-height: 12rem;

  --motion-duration-instant: 0.01ms;
  --motion-duration-fast: 150ms;
  --motion-duration-base: 300ms;
  --motion-duration-medium: 450ms;
  --motion-duration-slow: 600ms;
  --motion-duration-word: 700ms;
  --motion-duration-stagger: 55ms;
  --motion-duration-delay: 100ms;

  --motion-easing-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-easing-in-out: cubic-bezier(0.37, 0, 0.63, 1);

  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
}

/* ---------- Layout: Mobile (Basis) ---------- */
:root {
  --font-size-100: 0.75rem;
  --font-size-200: 0.875rem;
  --font-size-300: 1rem;
  --font-size-400: 1.125rem;
  --font-size-500: 1.25rem;
  --font-size-600: 1.25rem;
  --font-size-700: 1.5rem;
  --font-size-800: 2rem;
  --font-size-900: 2.25rem;

  --grid-columns: 4;
  --grid-gutter: 1rem;
  --grid-margin: 1rem;
  --grid-max-width: 90rem;

  --layout-navigation-height: 4.25rem;

  --layout-section-gap: 6rem;
}

/* ---------- Layout: Tablet ---------- */
@media (min-width: 48em) {
  :root {
    --font-size-100: 0.75rem;
    --font-size-200: 0.875rem;
    --font-size-300: 1rem;
    --font-size-400: 1.125rem;
    --font-size-500: 1.25rem;
    --font-size-600: 1.25rem;
    --font-size-700: 1.5rem;
    --font-size-800: 2rem;
    --font-size-900: 2.25rem;

    --grid-columns: 8;
    --grid-gutter: 1.5rem;
    --grid-margin: 1.5rem;
    --grid-max-width: 90rem;

    --layout-navigation-height: 4.25rem;

    --layout-section-gap: 7.5rem;
  }
}

/* ---------- Layout: Desktop ---------- */
@media (min-width: 64em) {
  :root {
    --font-size-100: 0.75rem;
    --font-size-200: 0.875rem;
    --font-size-300: 1rem;
    --font-size-400: 1.125rem;
    --font-size-500: 1.25rem;
    --font-size-600: 1.5rem;
    --font-size-700: 2rem;
    --font-size-800: 2.25rem;
    --font-size-900: 3.25rem;

    --grid-columns: 12;
    --grid-gutter: 1.5rem;
    --grid-margin: 2rem;
    --grid-max-width: 90rem;

    --layout-navigation-height: 4.3125rem;

    --layout-section-gap: 12.5rem;
  }
}

/* ---------- Layout: Wide ---------- */
@media (min-width: 90em) {
  :root {
    --font-size-100: 0.75rem;
    --font-size-200: 0.875rem;
    --font-size-300: 1rem;
    --font-size-400: 1.125rem;
    --font-size-500: 1.25rem;
    --font-size-600: 1.5rem;
    --font-size-700: 2rem;
    --font-size-800: 2.25rem;
    --font-size-900: 3.25rem;

    --grid-columns: 12;
    --grid-gutter: 2rem;
    --grid-margin: 2rem;
    --grid-max-width: 90rem;

    --layout-navigation-height: 4.3125rem;

    --layout-section-gap: 12.5rem;
  }
}

/* ---------- Semantic + Component: Light ---------- */
:root,
[data-theme="light"] {
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-inverse: var(--color-white);
  --color-text-brand: var(--color-blue-600);
  --color-text-link: var(--color-blue-600);
  --color-text-year-prefix: var(--color-neutral-500);
  --color-text-year-prefix-link: var(--color-blue-alpha-40);
  --color-text-year-prefix-on-action: var(--color-white-alpha-50);
  --color-text-on-action: var(--color-white);
  --color-text-on-sheet: var(--color-white);
  --color-text-on-sheet-secondary: var(--color-neutral-400);
  --color-text-tertiary: var(--color-neutral-500);

  --color-surface-default: var(--color-white);
  --color-surface-subtle: var(--color-neutral-50);
  --color-surface-muted: var(--color-neutral-100);
  --color-surface-inverse: var(--color-neutral-950);
  --color-surface-scrim: var(--color-black-alpha-40);
  --color-surface-sheet: var(--color-neutral-950);
  --color-surface-sheet-subtle: var(--color-neutral-900);
  --color-surface-sheet-muted: var(--color-neutral-800);

  --color-border-subtle: var(--color-black-alpha-6);
  --color-border-default: var(--color-black-alpha-10);
  --color-border-strong: var(--color-black);
  --color-border-inverse: var(--color-white-alpha-14);
  --color-border-on-sheet: var(--color-white-alpha-14);

  --color-shadow-inset: var(--color-black-alpha-5);
  --color-shadow-inset-pressed: var(--color-black-alpha-6);
  --color-shadow-raised: var(--color-black-alpha-12);

  --color-action-primary-default: var(--color-black);
  --color-action-primary-hover: var(--color-blue-600);
  --color-action-primary-active: var(--color-blue-700);

  --color-action-disabled: var(--color-neutral-100);
  --color-action-selected: var(--color-blue-600);

  --color-focus-ring: var(--color-blue-600);
  --color-focus-ring-on-sheet: var(--color-blue-400);

  --color-icon-default: var(--color-black);
  --color-icon-secondary: var(--color-neutral-600);
  --color-icon-brand: var(--color-blue-600);
  --color-icon-inverse: var(--color-white);

  --color-feedback-success-text: var(--color-green-700);
  --color-feedback-success-surface: var(--color-green-50);
  --color-feedback-success-border: var(--color-green-300);
  --color-feedback-success-solid: var(--color-green-600);

  --color-feedback-warning-text: var(--color-yellow-700);
  --color-feedback-warning-surface: var(--color-yellow-50);
  --color-feedback-warning-border: var(--color-yellow-300);
  --color-feedback-warning-solid: var(--color-yellow-200);

  --color-feedback-danger-text: var(--color-red-700);
  --color-feedback-danger-surface: var(--color-red-50);
  --color-feedback-danger-border: var(--color-red-300);
  --color-feedback-danger-solid: var(--color-red-600);

  --color-feedback-info-text: var(--color-blue-700);
  --color-feedback-info-surface: var(--color-blue-50);
  --color-feedback-info-border: var(--color-blue-300);
  --color-feedback-info-solid: var(--color-blue-600);

  --color-accent-text: var(--color-purple-600);
  --color-accent-surface: var(--color-purple-50);
  --color-accent-solid: var(--color-purple-400);
  --color-accent-highlight: var(--color-yellow-200);

  --color-illustration-brand: var(--color-blue-600);
  --color-illustration-ink: var(--color-black);
  --color-illustration-gain: var(--color-green-400);
  --color-illustration-pain: var(--color-red-400);
  --color-illustration-scan: var(--color-blue-alpha-10);

  --color-data-series-1: var(--color-blue-600);
  --color-data-series-2: var(--color-yellow-200);
  --color-data-series-3: var(--color-purple-400);
  --color-data-series-4: var(--color-green-600);
  --color-data-series-5: var(--color-red-400);
  --color-data-series-6: var(--color-blue-300);
  --color-data-series-7: var(--color-neutral-500);
  --color-data-series-8: var(--color-purple-700);
  --color-data-neutral-1: var(--color-neutral-100);
  --color-data-neutral-2: var(--color-neutral-200);
  --color-data-neutral-3: var(--color-neutral-300);

  --text-display-font-size: var(--font-size-900);
  --text-display-font-weight: var(--font-weight-bold);
  --text-display-line-height: var(--font-line-height-tight);

  --text-hero-font-size: var(--font-size-900);
  --text-hero-font-weight: var(--font-weight-bold);
  --text-hero-line-height: var(--font-line-height-relaxed);

  --text-heading-1-font-size: var(--font-size-800);
  --text-heading-1-font-weight: var(--font-weight-bold);
  --text-heading-1-line-height: var(--font-line-height-tight);

  --text-heading-2-font-size: var(--font-size-700);
  --text-heading-2-font-weight: var(--font-weight-bold);
  --text-heading-2-line-height: var(--font-line-height-tight);

  --text-heading-3-font-size: var(--font-size-500);
  --text-heading-3-font-weight: var(--font-weight-bold);
  --text-heading-3-line-height: var(--font-line-height-snug);

  --text-lead-font-size: var(--font-size-600);
  --text-lead-font-weight: var(--font-weight-semibold);
  --text-lead-line-height: var(--font-line-height-snug);

  --text-body-large-font-size: var(--font-size-400);
  --text-body-large-font-weight: var(--font-weight-semibold);
  --text-body-large-line-height: var(--font-line-height-normal);

  --text-body-font-size: var(--font-size-300);
  --text-body-font-weight: var(--font-weight-semibold);
  --text-body-line-height: var(--font-line-height-normal);

  --text-body-small-font-size: var(--font-size-200);
  --text-body-small-font-weight: var(--font-weight-semibold);
  --text-body-small-line-height: var(--font-line-height-tight);

  --text-label-font-size: var(--font-size-300);
  --text-label-font-weight: var(--font-weight-semibold);
  --text-label-line-height: var(--font-line-height-none);

  --text-label-strong-font-size: var(--font-size-300);
  --text-label-strong-font-weight: var(--font-weight-semibold);
  --text-label-strong-line-height: var(--font-line-height-none);

  --text-caption-font-size: var(--font-size-100);
  --text-caption-font-weight: var(--font-weight-semibold);
  --text-caption-line-height: var(--font-line-height-none);

  --button-primary-ink-background-default: var(--color-action-primary-default);
  --button-primary-ink-background-hover: var(--color-action-primary-hover);
  --button-primary-ink-background-active: var(--color-action-primary-active);
  --button-primary-ink-background-disabled: var(--color-action-disabled);

  --button-primary-ink-text-default: var(--color-text-inverse);
  --button-primary-ink-text-hover: var(--color-text-on-action);
  --button-primary-ink-text-active: var(--color-text-on-action);
  --button-primary-ink-text-disabled: var(--color-text-disabled);

  --button-primary-ink-border-default: var(--color-action-primary-default);
  --button-primary-ink-border-hover: var(--color-action-primary-hover);
  --button-primary-ink-border-active: var(--color-action-primary-active);
  --button-primary-ink-border-disabled: var(--color-action-disabled);

  --button-secondary-outline-background-default: var(--color-transparent);
  --button-secondary-outline-background-hover: var(--color-action-primary-hover);
  --button-secondary-outline-background-active: var(--color-action-primary-active);
  --button-secondary-outline-background-disabled: var(--color-transparent);

  --button-secondary-outline-text-default: var(--color-text-primary);
  --button-secondary-outline-text-hover: var(--color-text-on-action);
  --button-secondary-outline-text-active: var(--color-text-on-action);
  --button-secondary-outline-text-disabled: var(--color-text-disabled);

  --button-secondary-outline-border-default: var(--color-border-strong);
  --button-secondary-outline-border-hover: var(--color-action-primary-hover);
  --button-secondary-outline-border-active: var(--color-action-primary-active);
  --button-secondary-outline-border-disabled: var(--color-border-default);

  --button-focus-ring: var(--color-focus-ring);
  --button-height: var(--size-control-height);
  --button-padding-inline: var(--space-5);
  --button-padding-block: var(--space-2);
  --button-gap: var(--space-2);
  --button-radius: var(--radius-pill);
  --button-border-width: var(--border-width-thin);
  --button-font-size: var(--text-label-font-size);
  --button-font-weight: var(--text-label-font-weight);

  --hotkey-background-default: var(--color-surface-subtle);
  --hotkey-background-pressed: var(--color-surface-muted);

  --hotkey-border: var(--color-surface-muted);
  --hotkey-text: var(--color-text-primary);

  --hotkey-shadow-default: var(--color-shadow-inset);
  --hotkey-shadow-pressed: var(--color-shadow-inset-pressed);

  --hotkey-inverse-background-default: var(--color-surface-sheet);
  --hotkey-inverse-background-pressed: var(--color-surface-sheet-muted);

  --hotkey-inverse-border: var(--color-border-on-sheet);
  --hotkey-inverse-text: var(--color-text-on-sheet);
  --hotkey-inverse-padding-inline: var(--space-2);

  --hotkey-width: var(--size-hotkey-width);
  --hotkey-height: var(--size-hotkey-height);
  --hotkey-padding: var(--space-1);
  --hotkey-gap: var(--space-half);
  --hotkey-radius: var(--radius-small);
  --hotkey-font-size: var(--text-caption-font-size);

  --navigation-item-text-default: var(--color-text-primary);
  --navigation-item-text-hover: var(--color-text-primary);

  --navigation-item-gap: var(--space-0);

  --navigation-item-background-hover: var(--color-surface-muted);

  --navigation-item-height: var(--size-control-height);
  --navigation-item-padding-inline: var(--space-5);
  --navigation-item-padding-block: var(--space-2);
  --navigation-item-radius: var(--radius-pill);

  --navigation-bar-background: var(--color-surface-default);
  --navigation-bar-border: var(--color-surface-default);
  --navigation-bar-border-scrolled: var(--color-border-subtle);
  --navigation-bar-height: var(--layout-navigation-height);
  --navigation-bar-gap: var(--space-5);

  --logo-background: var(--color-illustration-brand);
  --logo-eye: var(--color-text-on-action);
  --logo-size: var(--size-logo);

  --card-background-default: var(--color-surface-muted);
  --card-background-live: var(--color-blue-300);
  --card-background-live-hover: var(--color-blue-400);

  --card-border: var(--color-border-subtle);
  --card-radius: var(--radius-small);

  --list-item-divider: var(--color-border-subtle);

  --menu-background: var(--color-surface-default);
  --menu-shadow: var(--color-shadow-raised);

  --menu-item-background-hover: var(--color-surface-muted);

  --sheet-background: var(--color-surface-sheet);
  --sheet-text: var(--color-text-on-sheet);
  --sheet-bar-height: var(--size-sheet-bar);
  --sheet-radius: var(--radius-large);
  --sheet-scrim: var(--color-surface-scrim);
  --sheet-bar-background: var(--color-surface-sheet-subtle);
  --sheet-focus-ring: var(--color-focus-ring-on-sheet);

  --filter-chip-background-default: var(--color-transparent);
  --filter-chip-background-hover: var(--color-surface-muted);
  --filter-chip-background-selected: var(--color-action-selected);
  --filter-chip-background-compact: var(--color-surface-muted);

  --filter-chip-text-default: var(--color-text-primary);
  --filter-chip-text-hover: var(--color-text-primary);
  --filter-chip-text-selected: var(--color-text-on-action);

  --filter-chip-padding-inline: var(--space-5);
  --filter-chip-padding-block: var(--space-2);
  --filter-chip-height: var(--size-control-height);
  --filter-chip-radius: var(--radius-pill);

  --timeline-segment-highlight: var(--color-data-series-1);
  --timeline-segment-muted-1: var(--color-data-neutral-1);
  --timeline-segment-muted-2: var(--color-data-neutral-2);
  --timeline-segment-muted-3: var(--color-data-neutral-3);

  --timeline-label: var(--color-text-primary);

  --project-item-divider: var(--color-border-subtle);

  --project-item-background-hover: var(--color-surface-subtle);

  --project-item-title: var(--color-text-primary);
  --project-item-meta-label: var(--color-text-primary);
  --project-item-meta-value: var(--color-text-primary);
  --project-item-media: var(--color-illustration-brand);
  --project-item-icon: var(--color-icon-default);
  --project-item-padding-inline: var(--space-12);
  --project-item-padding-inline-compact: var(--space-6);
  --project-item-padding-block: var(--space-6);
  --project-item-padding-block-collapsed: var(--space-10);
  --project-item-gap: var(--space-6);
  --project-item-media-width: var(--size-project-media-width);
  --project-item-media-height: var(--size-project-media-height);
  --project-item-media-radius: var(--radius-xlarge);
  --project-item-icon-size: var(--size-icon-xlarge);
}

/* ---------- Semantic + Component: Dark ---------- */
[data-theme="dark"] {
  --color-text-primary: var(--color-neutral-50);
  --color-text-secondary: var(--color-neutral-400);
  --color-text-disabled: var(--color-neutral-600);
  --color-text-inverse: var(--color-neutral-950);
  --color-text-brand: var(--color-blue-400);
  --color-text-link: var(--color-blue-400);
  --color-text-year-prefix: var(--color-neutral-500);
  --color-text-year-prefix-link: var(--color-blue-alpha-40);
  --color-text-year-prefix-on-action: var(--color-white-alpha-50);
  --color-text-on-action: var(--color-white);
  --color-text-on-sheet: var(--color-white);
  --color-text-on-sheet-secondary: var(--color-neutral-400);
  --color-text-tertiary: var(--color-neutral-500);

  --color-surface-default: var(--color-neutral-950);
  --color-surface-subtle: var(--color-neutral-900);
  --color-surface-muted: var(--color-neutral-800);
  --color-surface-inverse: var(--color-white);
  --color-surface-scrim: var(--color-black-alpha-40);
  --color-surface-sheet: var(--color-neutral-950);
  --color-surface-sheet-subtle: var(--color-neutral-900);
  --color-surface-sheet-muted: var(--color-neutral-800);

  --color-border-subtle: var(--color-white-alpha-6);
  --color-border-default: var(--color-white-alpha-14);
  --color-border-strong: var(--color-white);
  --color-border-inverse: var(--color-black-alpha-10);
  --color-border-on-sheet: var(--color-white-alpha-14);

  --color-shadow-inset: var(--color-black-alpha-40);
  --color-shadow-inset-pressed: var(--color-black-alpha-40);
  --color-shadow-raised: var(--color-black-alpha-40);

  --color-action-primary-default: var(--color-white);
  --color-action-primary-hover: var(--color-blue-500);
  --color-action-primary-active: var(--color-blue-600);

  --color-action-disabled: var(--color-neutral-800);
  --color-action-selected: var(--color-blue-500);

  --color-focus-ring: var(--color-blue-400);
  --color-focus-ring-on-sheet: var(--color-blue-400);

  --color-icon-default: var(--color-neutral-50);
  --color-icon-secondary: var(--color-neutral-400);
  --color-icon-brand: var(--color-blue-400);
  --color-icon-inverse: var(--color-neutral-950);

  --color-feedback-success-text: var(--color-green-300);
  --color-feedback-success-surface: var(--color-green-950);
  --color-feedback-success-border: var(--color-green-700);
  --color-feedback-success-solid: var(--color-green-400);

  --color-feedback-warning-text: var(--color-yellow-300);
  --color-feedback-warning-surface: var(--color-yellow-950);
  --color-feedback-warning-border: var(--color-yellow-700);
  --color-feedback-warning-solid: var(--color-yellow-200);

  --color-feedback-danger-text: var(--color-red-300);
  --color-feedback-danger-surface: var(--color-red-950);
  --color-feedback-danger-border: var(--color-red-700);
  --color-feedback-danger-solid: var(--color-red-400);

  --color-feedback-info-text: var(--color-blue-300);
  --color-feedback-info-surface: var(--color-blue-950);
  --color-feedback-info-border: var(--color-blue-700);
  --color-feedback-info-solid: var(--color-blue-400);

  --color-accent-text: var(--color-purple-300);
  --color-accent-surface: var(--color-purple-950);
  --color-accent-solid: var(--color-purple-400);
  --color-accent-highlight: var(--color-yellow-200);

  --color-illustration-brand: var(--color-blue-500);
  --color-illustration-ink: var(--color-neutral-50);
  --color-illustration-gain: var(--color-green-300);
  --color-illustration-pain: var(--color-red-300);
  --color-illustration-scan: var(--color-blue-alpha-10);

  --color-data-series-1: var(--color-blue-400);
  --color-data-series-2: var(--color-yellow-200);
  --color-data-series-3: var(--color-purple-300);
  --color-data-series-4: var(--color-green-300);
  --color-data-series-5: var(--color-red-300);
  --color-data-series-6: var(--color-blue-200);
  --color-data-series-7: var(--color-neutral-400);
  --color-data-series-8: var(--color-purple-200);
  --color-data-neutral-1: var(--color-neutral-900);
  --color-data-neutral-2: var(--color-neutral-800);
  --color-data-neutral-3: var(--color-neutral-700);

  --text-display-font-size: var(--font-size-900);
  --text-display-font-weight: var(--font-weight-bold);
  --text-display-line-height: var(--font-line-height-tight);

  --text-hero-font-size: var(--font-size-900);
  --text-hero-font-weight: var(--font-weight-bold);
  --text-hero-line-height: var(--font-line-height-relaxed);

  --text-heading-1-font-size: var(--font-size-800);
  --text-heading-1-font-weight: var(--font-weight-bold);
  --text-heading-1-line-height: var(--font-line-height-tight);

  --text-heading-2-font-size: var(--font-size-700);
  --text-heading-2-font-weight: var(--font-weight-bold);
  --text-heading-2-line-height: var(--font-line-height-tight);

  --text-heading-3-font-size: var(--font-size-500);
  --text-heading-3-font-weight: var(--font-weight-bold);
  --text-heading-3-line-height: var(--font-line-height-snug);

  --text-lead-font-size: var(--font-size-600);
  --text-lead-font-weight: var(--font-weight-semibold);
  --text-lead-line-height: var(--font-line-height-snug);

  --text-body-large-font-size: var(--font-size-400);
  --text-body-large-font-weight: var(--font-weight-semibold);
  --text-body-large-line-height: var(--font-line-height-normal);

  --text-body-font-size: var(--font-size-300);
  --text-body-font-weight: var(--font-weight-semibold);
  --text-body-line-height: var(--font-line-height-normal);

  --text-body-small-font-size: var(--font-size-200);
  --text-body-small-font-weight: var(--font-weight-semibold);
  --text-body-small-line-height: var(--font-line-height-tight);

  --text-label-font-size: var(--font-size-300);
  --text-label-font-weight: var(--font-weight-semibold);
  --text-label-line-height: var(--font-line-height-none);

  --text-label-strong-font-size: var(--font-size-300);
  --text-label-strong-font-weight: var(--font-weight-semibold);
  --text-label-strong-line-height: var(--font-line-height-none);

  --text-caption-font-size: var(--font-size-100);
  --text-caption-font-weight: var(--font-weight-semibold);
  --text-caption-line-height: var(--font-line-height-none);

  --button-primary-ink-background-default: var(--color-action-primary-default);
  --button-primary-ink-background-hover: var(--color-action-primary-hover);
  --button-primary-ink-background-active: var(--color-action-primary-active);
  --button-primary-ink-background-disabled: var(--color-action-disabled);

  --button-primary-ink-text-default: var(--color-text-inverse);
  --button-primary-ink-text-hover: var(--color-text-on-action);
  --button-primary-ink-text-active: var(--color-text-on-action);
  --button-primary-ink-text-disabled: var(--color-text-disabled);

  --button-primary-ink-border-default: var(--color-action-primary-default);
  --button-primary-ink-border-hover: var(--color-action-primary-hover);
  --button-primary-ink-border-active: var(--color-action-primary-active);
  --button-primary-ink-border-disabled: var(--color-action-disabled);

  --button-secondary-outline-background-default: var(--color-transparent);
  --button-secondary-outline-background-hover: var(--color-action-primary-hover);
  --button-secondary-outline-background-active: var(--color-action-primary-active);
  --button-secondary-outline-background-disabled: var(--color-transparent);

  --button-secondary-outline-text-default: var(--color-text-primary);
  --button-secondary-outline-text-hover: var(--color-text-on-action);
  --button-secondary-outline-text-active: var(--color-text-on-action);
  --button-secondary-outline-text-disabled: var(--color-text-disabled);

  --button-secondary-outline-border-default: var(--color-border-strong);
  --button-secondary-outline-border-hover: var(--color-action-primary-hover);
  --button-secondary-outline-border-active: var(--color-action-primary-active);
  --button-secondary-outline-border-disabled: var(--color-border-default);

  --button-focus-ring: var(--color-focus-ring);
  --button-height: var(--size-control-height);
  --button-padding-inline: var(--space-5);
  --button-padding-block: var(--space-2);
  --button-gap: var(--space-2);
  --button-radius: var(--radius-pill);
  --button-border-width: var(--border-width-thin);
  --button-font-size: var(--text-label-font-size);
  --button-font-weight: var(--text-label-font-weight);

  --hotkey-background-default: var(--color-surface-subtle);
  --hotkey-background-pressed: var(--color-surface-muted);

  --hotkey-border: var(--color-surface-muted);
  --hotkey-text: var(--color-text-primary);

  --hotkey-shadow-default: var(--color-shadow-inset);
  --hotkey-shadow-pressed: var(--color-shadow-inset-pressed);

  --hotkey-inverse-background-default: var(--color-surface-sheet);
  --hotkey-inverse-background-pressed: var(--color-surface-sheet-muted);

  --hotkey-inverse-border: var(--color-border-on-sheet);
  --hotkey-inverse-text: var(--color-text-on-sheet);
  --hotkey-inverse-padding-inline: var(--space-2);

  --hotkey-width: var(--size-hotkey-width);
  --hotkey-height: var(--size-hotkey-height);
  --hotkey-padding: var(--space-1);
  --hotkey-gap: var(--space-half);
  --hotkey-radius: var(--radius-small);
  --hotkey-font-size: var(--text-caption-font-size);

  --navigation-item-text-default: var(--color-text-primary);
  --navigation-item-text-hover: var(--color-text-primary);

  --navigation-item-gap: var(--space-0);

  --navigation-item-background-hover: var(--color-surface-muted);

  --navigation-item-height: var(--size-control-height);
  --navigation-item-padding-inline: var(--space-5);
  --navigation-item-padding-block: var(--space-2);
  --navigation-item-radius: var(--radius-pill);

  --navigation-bar-background: var(--color-surface-default);
  --navigation-bar-border: var(--color-surface-default);
  --navigation-bar-border-scrolled: var(--color-border-subtle);
  --navigation-bar-height: var(--layout-navigation-height);
  --navigation-bar-gap: var(--space-5);

  --logo-background: var(--color-illustration-brand);
  --logo-eye: var(--color-text-on-action);
  --logo-size: var(--size-logo);

  --card-background-default: var(--color-surface-muted);
  --card-background-live: var(--color-blue-300);
  --card-background-live-hover: var(--color-blue-400);

  --card-border: var(--color-border-subtle);
  --card-radius: var(--radius-small);

  --list-item-divider: var(--color-border-subtle);

  --menu-background: var(--color-surface-default);
  --menu-shadow: var(--color-shadow-raised);

  --menu-item-background-hover: var(--color-surface-muted);

  --sheet-background: var(--color-surface-sheet);
  --sheet-text: var(--color-text-on-sheet);
  --sheet-bar-height: var(--size-sheet-bar);
  --sheet-radius: var(--radius-large);
  --sheet-scrim: var(--color-surface-scrim);
  --sheet-bar-background: var(--color-surface-sheet-subtle);
  --sheet-focus-ring: var(--color-focus-ring-on-sheet);

  --filter-chip-background-default: var(--color-transparent);
  --filter-chip-background-hover: var(--color-surface-muted);
  --filter-chip-background-selected: var(--color-action-selected);
  --filter-chip-background-compact: var(--color-surface-muted);

  --filter-chip-text-default: var(--color-text-primary);
  --filter-chip-text-hover: var(--color-text-primary);
  --filter-chip-text-selected: var(--color-text-on-action);

  --filter-chip-padding-inline: var(--space-5);
  --filter-chip-padding-block: var(--space-2);
  --filter-chip-height: var(--size-control-height);
  --filter-chip-radius: var(--radius-pill);

  --timeline-segment-highlight: var(--color-data-series-1);
  --timeline-segment-muted-1: var(--color-data-neutral-1);
  --timeline-segment-muted-2: var(--color-data-neutral-2);
  --timeline-segment-muted-3: var(--color-data-neutral-3);

  --timeline-label: var(--color-text-primary);

  --project-item-divider: var(--color-border-subtle);

  --project-item-background-hover: var(--color-surface-subtle);

  --project-item-title: var(--color-text-primary);
  --project-item-meta-label: var(--color-text-primary);
  --project-item-meta-value: var(--color-text-primary);
  --project-item-media: var(--color-illustration-brand);
  --project-item-icon: var(--color-icon-default);
  --project-item-padding-inline: var(--space-12);
  --project-item-padding-inline-compact: var(--space-6);
  --project-item-padding-block: var(--space-6);
  --project-item-padding-block-collapsed: var(--space-10);
  --project-item-gap: var(--space-6);
  --project-item-media-width: var(--size-project-media-width);
  --project-item-media-height: var(--size-project-media-height);
  --project-item-media-radius: var(--radius-xlarge);
  --project-item-icon-size: var(--size-icon-xlarge);
}