html {
  /* ==========================================================================
   * PRIMITIVES (THEME-DEPENDENT)
   * ======================================================================= */

  color-scheme: light dark;

  /*@media (prefers-color-scheme: dark) {*/
  /*  color-scheme: dark;*/
  /*}*/

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

  &[data-theme='light'] {
    color-scheme: light;
  }

  /* Brand blues */
  --dbc-blue-500: light-dark(#0c3ee3, #3b82f6);
  --dbc-blue-600: light-dark(#0932b6, #2563eb);
  --dbc-blue-400: light-dark(#3b6ff5, #60a5fa);
  --dbc-blue-300: light-dark(#7ea5ff, #93c5fd);
  --dbc-blue-100: light-dark(#e8edfd, #0b1f3b);
  --dbc-blue-150: light-dark(#dce5fc, #102a4d);

  /* Neutrals */
  --dbc-neutral-900: light-dark(#1a1a1a, #f9fafb);
  --dbc-neutral-700: light-dark(#374151, #d1d5db);
  --dbc-neutral-600: light-dark(#5f6368, #9ca3af);
  --dbc-neutral-200: light-dark(#e8eaee, #374151);
  --dbc-neutral-100: light-dark(#f3f4f6, #1f2937);

  /* Added fixed surface neutrals */
  --dbc-surface-muted: light-dark(#f8fafc, #1f2937);
  --dbc-surface-strong: light-dark(#f3f4f6, #111827);

  /* Contextual warm neutrals */
  --dbc-contextual-200: light-dark(#f4f2ee, #1b1712);
  --dbc-contextual-100: light-dark(#faf8f5, #15120e);

  /* Accents */
  --dbc-pink-500: light-dark(#ec4899, #f472b6);
  --dbc-pink-600: light-dark(#be185d, #db2777);
  --dbc-magenta-500: light-dark(#d946ef, #e879f9);
  --dbc-magenta-100: light-dark(#fae8ff, #3b0a45);
  --dbc-magenta-700: light-dark(#a21caf, #f5d0fe);

  --dbc-gray-500: light-dark(#6b7280, #9ca3af);
  --dbc-gray-600: light-dark(#4b5563, #6b7280);

  /* Status colors */
  --dbc-green-500: light-dark(#0da874, #22c55e);
  --dbc-green-100: light-dark(#e6f9f3, #052e1f);
  --dbc-green-700: light-dark(#065f46, #86efac);
  --dbc-green-300: light-dark(#34d399, #4ade80);

  --dbc-amber-700: light-dark(#b45309, #f59e0b);
  --dbc-amber-100: light-dark(#fff7ed, #2b1b00);
  /* Fixed (not light-dark): needs to stay a legible pale gold behind dark ink in both schemes */
  --dbc-amber-200: #fde68a;
  --dbc-amber-800: light-dark(#92400e, #fcd34d);
  --dbc-amber-400: light-dark(#f59e0b, #fbbf24);

  --dbc-red-600: light-dark(#dc2626, #ef4444);
  --dbc-red-100: light-dark(#fef2f2, #2b0b0b);
  --dbc-red-800: light-dark(#991b1b, #fecaca);
  --dbc-red-300: light-dark(#f87171, #f87171);

  --dbc-info-500: light-dark(#0ea5e9, #0ea5e9);
  --dbc-info-100: light-dark(#e0f2fe, #042a3a);
  --dbc-info-700: light-dark(#075985, #bae6fd);
  --dbc-info-300: light-dark(#38bdf8, #38bdf8);

  /* ==========================================================================
   * SEMANTIC COLORS (THEME-DEPENDENT)
   * ======================================================================= */

  --color-brand: var(--dbc-blue-500);
  --color-brand-hover: var(--dbc-blue-600);
  --color-brand-strong: var(--dbc-blue-600);
  --color-accent: var(--dbc-magenta-500);
  --color-accent-bg: var(--dbc-magenta-100);
  --color-accent-border: color-mix(in srgb, var(--dbc-magenta-500) 24%, transparent);
  --color-accent-fg: var(--dbc-magenta-700);
  --color-fg-on-accent: light-dark(#ffffff, #111827);

  /* Backgrounds & surfaces */
  --color-bg-page: light-dark(#ffffff, #111827);
  --color-bg-surface: light-dark(#ffffff, #111827);
  --color-bg-surface-subtle: var(--dbc-surface-muted);
  --color-bg-surface-strong: var(--dbc-surface-strong);
  --color-bg-inverse: light-dark(#1f2937, #2b3444);

  --color-bg-toolbar: light-dark(#f3f4f6, #1f2937);
  --color-bg-toolbar-hover: light-dark(#eef0f3, #263244);

  /* Contextual surfaces */
  --color-bg-contextual: var(--dbc-contextual-200);
  --color-bg-contextual-subtle: var(--dbc-contextual-100);

  /* Interaction backgrounds */
  --color-bg-hover-subtle: var(--opac-bg-light);
  --color-bg-pressed-subtle: var(--opac-bg-default);

  /* Selected */
  --color-bg-selected: var(--dbc-blue-100);
  --color-bg-selected-hover: var(--dbc-blue-150);

  /* Highlight */
  --color-highlight-bg: var(--dbc-amber-200);
  --color-highlight-fg: #1a1a1a;

  --color-neutral: var(--dbc-neutral-200);

  /* Borders */
  --color-border-subtle: light-dark(#e5e7eb, rgba(255, 255, 255, 0.12));
  --color-border-default: light-dark(#d1d5db, rgba(255, 255, 255, 0.18));
  --color-border-strong: light-dark(#9ca3af, rgba(255, 255, 255, 0.28));
  --color-border-selected: var(--color-brand);

  /* Text */
  --color-fg-default: var(--dbc-neutral-900);
  --color-fg-muted: var(--dbc-neutral-700);
  --color-fg-subtle: var(--dbc-neutral-600);
  --color-fg-inverse: light-dark(#ffffff, #f9fafb);

  --color-fg-on-strong: light-dark(#ffffff, #111827);
  --color-fg-on-brand: light-dark(#ffffff, #111827);

  /* Links */
  --color-link: light-dark(var(--dbc-blue-500), var(--dbc-blue-300));
  --color-link-hover: light-dark(var(--dbc-blue-600), #bfdbfe);

  /* Status */
  --color-status-success: var(--dbc-green-500);
  --color-fg-on-status-success: light-dark(#ffffff, #f9fafb);
  --color-status-success-bg: var(--dbc-green-100);
  --color-status-success-border: color-mix(in srgb, var(--dbc-green-500) 24%, transparent);
  --color-status-success-fg: var(--dbc-green-700);

  --color-status-warning: var(--dbc-amber-700);
  --color-fg-on-status-warning: light-dark(#ffffff, #f9fafb);
  --color-status-warning-bg: var(--dbc-amber-100);
  --color-status-warning-border: color-mix(in srgb, var(--dbc-amber-700) 24%, transparent);
  --color-status-warning-fg: var(--dbc-amber-800);

  --color-status-error: var(--dbc-red-600);
  --color-fg-on-status-error: light-dark(#ffffff, #f9fafb);
  --color-status-error-bg: var(--dbc-red-100);
  --color-status-error-border: color-mix(in srgb, var(--dbc-red-600) 24%, transparent);
  --color-status-error-fg: var(--dbc-red-800);

  --color-status-info: var(--dbc-info-500);
  --color-fg-on-status-info: light-dark(#ffffff, #f9fafb);
  --color-status-info-bg: var(--dbc-info-100);
  --color-status-info-border: color-mix(in srgb, var(--dbc-info-500) 24%, transparent);
  --color-status-info-fg: var(--dbc-info-700);

  /* Soft status surfaces — for compact chips/badges, not alerts */
  --color-status-success-bg-soft: color-mix(
    in srgb,
    var(--color-status-success) 10%,
    var(--color-bg-surface)
  );
  --color-status-warning-bg-soft: color-mix(
    in srgb,
    var(--color-status-warning) 10%,
    var(--color-bg-surface)
  );
  --color-status-error-bg-soft: color-mix(
    in srgb,
    var(--color-status-error) 8%,
    var(--color-bg-surface)
  );
  --color-status-info-bg-soft: color-mix(
    in srgb,
    var(--color-status-info) 10%,
    var(--color-bg-surface)
  );

  --color-status-success-fg-soft: var(--color-status-success-fg);
  --color-status-warning-fg-soft: var(--color-status-warning-fg);
  --color-status-error-fg-soft: var(--color-status-error-fg);
  --color-status-info-fg-soft: var(--color-status-info-fg);
  --color-accent-bg-soft: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-surface));
  --color-accent-fg-soft: var(--color-accent-fg);

  /* Chart colors */
  --color-chart-empty: color-mix(in srgb, var(--color-fg-muted) 10%, rgb(255 255 255 / 0));
  --color-chart-neutral: color-mix(in srgb, var(--color-fg-muted) 25%, rgb(255 255 255 / 0));
  --color-chart-primary: color-mix(in srgb, var(--dbc-blue-500) 75%, rgb(255 255 255 / 0));
  --color-chart-success: color-mix(in srgb, var(--dbc-green-500) 75%, rgb(255 255 255 / 0));
  --color-chart-warning: color-mix(in srgb, var(--dbc-amber-400) 75%, rgb(255 255 255 / 0));
  --color-chart-brand: color-mix(in srgb, var(--dbc-pink-500) 75%, rgb(255 255 255 / 0));
  --color-chart-accent: color-mix(in srgb, var(--dbc-magenta-500) 75%, rgb(255 255 255 / 0));
  --color-chart-info: color-mix(in srgb, var(--dbc-info-500) 75%, rgb(255 255 255 / 0));
  --color-chart-error: color-mix(in srgb, var(--dbc-red-600) 75%, rgb(255 255 255 / 0));

  /* Legacy aliases */
  --color-chart-blue: var(--color-chart-primary);
  --color-chart-green: var(--color-chart-success);
  --color-chart-amber: var(--color-chart-warning);
  --color-chart-pink: var(--color-chart-brand);
  --color-chart-magenta: var(--color-chart-accent);
  --color-chart-sky: var(--color-chart-info);
  --color-chart-red: var(--color-chart-error);

  /* Disabled */
  --color-disabled-bg: var(--dbc-neutral-100);
  --color-disabled-fg: light-dark(#9ca3af, #6b7280);
  --color-disabled-border: var(--dbc-neutral-200);

  /* Focus */
  --color-focus-ring: var(--dbc-blue-300);
  --focus-ring: 0 0 0 3px light-dark(rgba(12, 62, 227, 0.25), rgba(59, 130, 246, 0.35));
  --color-field-focus: var(--color-brand);

  /* Syntax (JSON viewer) */
  --color-syntax-accent: var(--dbc-blue-300);
  --color-syntax-string: var(--dbc-green-300);
  --color-syntax-number: var(--dbc-amber-400);
  --color-syntax-boolean: var(--dbc-pink-500);

  /* ==========================================================================
   * COMPONENT-LEVEL TOKENS (THEME-DEPENDENT COLORS)
   * ======================================================================= */

  /* Cards */
  --card-bg-default: var(--color-bg-surface);
  --card-bg-subtle: var(--color-bg-surface-subtle);
  --card-bg-strong: var(--color-bg-surface-strong);

  --card-fg-default: var(--color-fg-default);
  --card-fg-on-strong: var(--color-fg-on-strong);

  /* Buttons */
  --button-bg-primary: var(--color-brand);
  --button-bg-primary-hover: var(--color-brand-hover);
  --button-fg-primary: var(--color-fg-on-brand);

  /* Product / logo lockup — generic defaults; apps with a custom identity
     override these tokens only via the product-theme token registry. */
  --color-logo: var(--color-fg-default);
  --color-logo-bg: color-mix(in srgb, var(--color-logo) 10%, var(--color-bg-surface));
  --color-logo-fg: var(--color-fg-default);

  /* Navbar */
  --color-navbar-bg: var(--color-bg-surface);
  --color-navbar-fg: var(--color-fg-default);
  --color-navbar-fg-muted: var(--color-fg-muted);
  --color-navbar-border: var(--color-border-default);
  /* Active nav-link accent — deliberately its own token, not --color-logo:
     the two happen to agree in some themes (filmstriben: both yellow) but
     not others (dbc: logo is neutral fg-default, but the active link should
     still read as brand-colored, not the same shade as inactive text) */
  --color-navbar-brand: var(--color-brand);

  /* Tables */
  --table-header-bg: light-dark(#f3f4f6, #1b2533);
  --table-row-bg: light-dark(#ffffff, #111827);
  --table-row-bg-alt: light-dark(#f7f9fc, #141d2a);
  --table-row-bg-hover: light-dark(#eef2f7, #172131);
  --table-row-bg-selected: var(--dbc-blue-100);
  --table-row-bg-selected-hover: var(--dbc-blue-150);

  --table-border-subtle: light-dark(#eef1f4, rgba(255, 255, 255, 0.08));
  --table-divider: light-dark(#e8ebef, rgba(255, 255, 255, 0.08));

  --table-header-fg: var(--color-fg-subtle);
  --table-cell-fg: var(--color-fg-default);

  /* ==========================================================================
   * THEME-SPECIFIC NON-COLOR TOKENS (VISUAL EFFECTS)
   * ======================================================================= */

  /* Opacities */
  --opac-bg-light: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.05));
  --opac-bg-default: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1));
  --opac-bg-dark: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15));
  --opac-bg-brand: light-dark(rgba(49, 94, 251, 0.05), rgba(59, 130, 246, 0.12));
  --opac-bg-light-invert: light-dark(rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.05));
  --opac-bg-default-invert: light-dark(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
  --opac-bg-dark-invert: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.15));

  /* Shadows */

  --shadow-xs: 0 1px 1px light-dark(rgba(0, 0, 0, 0.04), transparent);

  --shadow-sm: 0 1px 2px light-dark(rgba(0, 0, 0, 0.06), transparent);

  --shadow-md: 0 2px 6px light-dark(rgba(0, 0, 0, 0.08), transparent);

  --shadow-lg: 0 4px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35));

  --shadow-xl: 0 8px 24px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.45));

  /* Skeletons */
  --skeleton-base: light-dark(#e5e7eb, #374151);
  --skeleton-pulse: light-dark(#f3f4f6, #4b5563);
}

/* Inverse surface (dark background context) */
[data-surface='inverse'] {
  /* Text */
  --color-fg-default: #ffffff;
  --color-fg-muted: rgba(255, 255, 255, 0.7);
  --color-fg-subtle: rgba(255, 255, 255, 0.5);

  /* Borders */
  --color-border-subtle: rgba(255, 255, 255, 0.15);
  --color-border-default: rgba(255, 255, 255, 0.3);
  --color-border-strong: rgba(255, 255, 255, 0.6);

  /* Surfaces — keep controls visible on a dark backdrop */
  --color-bg-surface: rgba(255, 255, 255, 0.08);
  --color-bg-toolbar: rgba(255, 255, 255, 0.12);
  --color-bg-toolbar-hover: rgba(255, 255, 255, 0.18);

  /* Interaction */
  --color-bg-hover-subtle: var(--opac-bg-light-invert);
  --color-bg-pressed-subtle: var(--opac-bg-default-invert);

  /* Opacity system override */
  --opac-bg-default: var(--opac-bg-default-invert);
  --opac-bg-dark: var(--opac-bg-dark-invert);

  /* Focus */
  --color-focus-ring: rgba(255, 255, 255, 0.5);
  --focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);
}