:root {
  color-scheme: light;

  /* Trucken Blue: the single product and company accent. */
  --tr-brand-50: #edf5ff;
  --tr-brand-100: #dbeaff;
  --tr-brand-200: #b9d5ff;
  --tr-brand-300: #8ab9fb;
  --tr-brand-400: #5797f3;
  --tr-brand-500: #2f7bea;
  --tr-brand-600: #1769e9;
  --tr-brand-700: #0f56c2;
  --tr-brand-800: #123f88;
  --tr-brand-900: #142f5d;
  --tr-brand-rgb: 23, 105, 233;

  /* Semantic light-theme tokens. */
  --tr-canvas: #f1f5f9;
  --tr-surface: #ffffff;
  --tr-surface-subtle: #f7f9fc;
  --tr-surface-raised: #ffffff;
  --tr-surface-hover: #eef4fb;
  --tr-text: #102036;
  --tr-text-secondary: #3b4f67;
  --tr-text-muted: #64778d;
  --tr-text-faint: #8796a8;
  --tr-border: #dfe7ef;
  --tr-border-subtle: #edf1f5;
  --tr-border-strong: #c6d2df;
  --tr-accent: var(--tr-brand-600);
  --tr-accent-hover: var(--tr-brand-700);
  --tr-accent-text: var(--tr-brand-700);
  --tr-accent-soft: var(--tr-brand-50);
  --tr-accent-border: var(--tr-brand-200);
  --tr-on-accent: #ffffff;
  --tr-focus-ring: rgba(var(--tr-brand-rgb), 0.24);
  --tr-nav-bg: #0d1725;
  --tr-nav-surface: #152235;
}

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

  /* Dark mode uses brand-tinted surfaces instead of inverting light mode. */
  --tr-canvas: #0b131f;
  --tr-surface: #111c2b;
  --tr-surface-subtle: #162335;
  --tr-surface-raised: #1b2a3d;
  --tr-surface-hover: #203249;
  --tr-text: #edf3fa;
  --tr-text-secondary: #c5d1df;
  --tr-text-muted: #98a9bc;
  --tr-text-faint: #73869c;
  --tr-border: #2a3a4f;
  --tr-border-subtle: #223145;
  --tr-border-strong: #3b4e66;
  --tr-accent: var(--tr-brand-600);
  --tr-accent-hover: var(--tr-brand-500);
  --tr-accent-text: #7db1ff;
  --tr-accent-soft: #173252;
  --tr-accent-border: #315b8d;
  --tr-on-accent: #ffffff;
  --tr-focus-ring: rgba(125, 177, 255, 0.32);
  --tr-nav-bg: #070d16;
  --tr-nav-surface: #111c2b;
}