:root {
  color-scheme: dark;
  --ds-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Night theme. Numbered surfaces preserve the legacy cyan/blue layers for
     backward compatibility. Use control-surface tokens for palette-neutral UI. */
  --ds-color-bg: #070b16;
  --ds-color-bg-soft: #0b1020;
  --ds-color-surface-0: #0d1325;
  --ds-color-surface-1: #111a31;
  --ds-color-surface-2: #17233f;
  --ds-color-surface-3: #1d2c4d;
  --ds-color-border: rgba(151, 178, 222, 0.16);
  --ds-color-text: #f3f7ff;
  --ds-color-text-soft: #c8d1e5;
  --ds-color-text-muted: #7e8ba6;
  --ds-color-sidebar: rgba(10, 14, 29, 0.82);
  --ds-color-sidebar-border: rgba(151, 178, 222, 0.08);
  --ds-color-control-surface: rgba(255, 255, 255, 0.04);
  --ds-color-control-surface-soft: rgba(255, 255, 255, 0.03);
  --ds-color-schedule-surface: rgba(255, 255, 255, 0.035);
  --ds-color-overlay-surface: color-mix(in srgb, var(--ds-color-primary) 4%, #14151d);
  --ds-color-media-surface: color-mix(in srgb, var(--ds-color-primary) 4%, #14151d);
  --ds-color-media-track: color-mix(in srgb, var(--ds-color-primary) 26%, #303039);
  --ds-color-scrollbar-track: rgba(255, 255, 255, 0.025);
  --ds-color-scrollbar-thumb: color-mix(in srgb, var(--ds-color-primary) 42%, var(--ds-color-surface-3));
  --ds-color-scrollbar-thumb-hover: color-mix(in srgb, var(--ds-color-primary) 62%, var(--ds-color-surface-3));
  --ds-card-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  --ds-shadow-card: 0 20px 54px rgba(0, 0, 0, 0.34);
  --ds-shadow-app: 0 28px 70px rgba(7, 11, 22, 0.42);
  --ds-body-bg: linear-gradient(180deg, #111827 0, #080c17 100%);

  /* Semantic state colors stay recognizable across palettes. */
  --ds-color-success: #37dc92;
  --ds-color-success-contrast: #051311;
  --ds-color-danger: #ff5f83;
  --ds-color-danger-contrast: #1c0610;
  --ds-color-warning: #f4ba58;
  --ds-color-warning-contrast: #181005;
  --ds-color-info: var(--ds-color-secondary);
  --ds-color-info-contrast: #061116;

  /* Default cyan palette. palettes.css overrides these when requested. */
  --ds-color-primary: #4be7ef;
  --ds-color-primary-strong: #1dbfc9;
  --ds-color-secondary: #3f82d9;
  --ds-color-violet: #8b5cf6;
  --ds-color-brand: #95f9ff;
  --ds-color-border-strong: rgba(138, 197, 255, 0.34);
  --ds-color-primary-soft: rgba(75, 231, 239, 0.09);
  --ds-color-primary-contrast: #061116;
  --ds-gradient-primary: linear-gradient(135deg, #4be7ef, #3f82d9);
  --ds-gradient-brand: linear-gradient(135deg, rgba(75, 231, 239, 0.22), rgba(63, 130, 217, 0.16));
  --ds-shadow-glow: 0 0 24px rgba(75, 231, 239, 0.24), 0 0 64px rgba(63, 130, 217, 0.13);
  --ds-focus-ring: 0 0 0 3px rgba(75, 231, 239, 0.34);
  --ds-shell-bg:
    linear-gradient(90deg, rgba(14, 20, 39, 0.96) 0 286px, rgba(7, 11, 22, 0.88) 286px),
    radial-gradient(ellipse 26% 34% at 52% -6%, rgba(255, 255, 255, 0.72) 0 8%, rgba(107, 226, 255, 0.34) 16%, transparent 36%),
    linear-gradient(135deg, rgba(75, 231, 239, 0.05), rgba(139, 92, 246, 0.05) 52%, transparent);

  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 14px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;

  --ds-text-xs: 12px;
  --ds-text-sm: 13px;
  --ds-text-md: 15px;
  --ds-text-lg: 18px;
  --ds-text-xl: 24px;
  --ds-text-display: 34px;
}

:root[data-theme="light"] {
  color-scheme: light;
  /* Numbered light surfaces also preserve the legacy cool-blue layering. */
  --ds-color-bg: #eef3f8;
  --ds-color-bg-soft: #f6f9fd;
  --ds-color-surface-0: #ffffff;
  --ds-color-surface-1: #f8fbff;
  --ds-color-surface-2: #eaf1fb;
  --ds-color-surface-3: #dce8f7;
  --ds-color-border: rgba(42, 74, 124, 0.16);
  --ds-color-text: #142033;
  --ds-color-text-soft: #40516d;
  --ds-color-text-muted: #6e7d94;
  --ds-color-sidebar: rgba(248, 251, 255, 0.86);
  --ds-color-sidebar-border: rgba(42, 74, 124, 0.1);
  --ds-color-control-surface: rgba(255, 255, 255, 0.56);
  --ds-color-control-surface-soft: rgba(255, 255, 255, 0.42);
  --ds-color-schedule-surface: #f8fbff;
  --ds-color-overlay-surface: color-mix(in srgb, var(--ds-color-primary) 3%, #ffffff);
  --ds-color-media-surface: color-mix(in srgb, var(--ds-color-primary) 3%, #ffffff);
  --ds-color-media-track: color-mix(in srgb, var(--ds-color-primary) 20%, #d7dce4);
  --ds-color-scrollbar-track: rgba(42, 74, 124, 0.06);
  --ds-color-scrollbar-thumb: color-mix(in srgb, var(--ds-color-primary) 38%, var(--ds-color-surface-3));
  --ds-color-scrollbar-thumb-hover: color-mix(in srgb, var(--ds-color-primary) 56%, var(--ds-color-surface-3));
  --ds-card-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.54));
  --ds-shadow-card: 0 18px 42px rgba(40, 63, 94, 0.16);
  --ds-shadow-app: 0 28px 70px rgba(40, 63, 94, 0.2);
  --ds-body-bg: linear-gradient(180deg, #eef3f8 0, #e6edf6 100%);

  --ds-color-success: #0f754b;
  --ds-color-success-contrast: #ffffff;
  --ds-color-danger: #c9365a;
  --ds-color-danger-contrast: #ffffff;
  --ds-color-warning: #9a650d;
  --ds-color-warning-contrast: #ffffff;
  --ds-color-info: var(--ds-color-secondary);
  --ds-color-info-contrast: #ffffff;

  --ds-color-primary: #0faeb9;
  --ds-color-primary-strong: #0997a1;
  --ds-color-secondary: #2f70c7;
  --ds-color-violet: #7b5cd6;
  --ds-color-brand: #0c7f89;
  --ds-color-border-strong: rgba(20, 151, 180, 0.36);
  --ds-color-primary-soft: rgba(15, 174, 185, 0.1);
  --ds-color-primary-contrast: #061116;
  --ds-gradient-primary: linear-gradient(135deg, #20bac4, #3c7fd5);
  --ds-gradient-brand: linear-gradient(135deg, rgba(15, 174, 185, 0.24), rgba(47, 112, 199, 0.16));
  --ds-shadow-glow: 0 0 18px rgba(15, 174, 185, 0.16), 0 0 48px rgba(47, 112, 199, 0.1);
  --ds-focus-ring: 0 0 0 3px rgba(15, 174, 185, 0.24);
  --ds-shell-bg:
    linear-gradient(90deg, rgba(248, 251, 255, 0.96) 0 286px, rgba(239, 245, 252, 0.9) 286px),
    radial-gradient(ellipse 30% 32% at 52% -6%, rgba(255, 255, 255, 0.9) 0 9%, rgba(79, 205, 222, 0.22) 18%, transparent 42%),
    linear-gradient(135deg, rgba(15, 174, 185, 0.07), rgba(123, 92, 214, 0.05) 52%, transparent);
}