/**
 * Web Global Design Tokens — Theme Contract (M2.5 Reference)
 * Themes: dark-default (prod lossless) | light (formal Light)
 * Keep --color-* names; extend semantics for Surface / Control / Chart / Elevation.
 */
html[data-theme="dark-default"] {
  --color-scheme: dark;

  /* —— Surface —— */
  --color-bg-page: #030c16;
  --color-bg-page-mid: #07192c;
  --color-bg-page-deep: #061525;
  --color-bg-sidebar: #020b15;
  --color-bg-panel: #0b1420;
  --color-bg-panel-2: #0f1b2c;
  --color-bg-card: rgba(8, 20, 34, 0.72);
  --color-bg-elevated-soft: rgba(255, 255, 255, 0.06);
  --color-bg-overlay: rgba(3, 10, 24, 0.82);
  --color-bg-hover-soft: rgba(255, 255, 255, 0.12);
  --color-bg-topbar: rgba(3, 12, 22, 0.86);
  --color-bg-canvas: #07111f;
  --color-bg-canvas-mid: #0b1b2e;
  --color-bg-canvas-end: #10243a;
  --color-bg-canvas-glow-1: rgba(42, 83, 128, 0.36);
  --color-bg-canvas-glow-2: rgba(20, 58, 94, 0.34);
  --color-bg-mobile-chrome: #061323;
  --color-bg-side-panel: rgba(11, 25, 42, 0.88);
  --color-bg-picker: rgba(7, 17, 31, 0.72);
  --color-bg-sheet: rgba(2, 8, 18, 0.72);
  --color-bg-structure-card: rgba(4, 14, 26, 0.62);
  --color-bg-modal: linear-gradient(180deg, rgba(18, 36, 62, 0.98), rgba(10, 22, 40, 0.98));
  --color-bg-selected: linear-gradient(180deg, rgba(56, 120, 190, 0.48), rgba(28, 72, 120, 0.58));
  --color-bg-selected-soft: rgba(90, 150, 220, 0.14);
  --color-bg-control: rgba(255, 255, 255, 0.06);
  --color-bg-control-hover: rgba(255, 255, 255, 0.12);
  --color-bg-inset: rgba(4, 14, 26, 0.55);
  --color-bg-track: linear-gradient(180deg, rgba(12, 28, 48, 0.82), rgba(6, 16, 30, 0.78));
  --color-bg-mask: rgba(2, 10, 22, 0.48);

  /* —— Border —— */
  --color-border-default: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(145, 174, 210, 0.26);
  --color-border-control: rgba(145, 174, 210, 0.26);
  --color-border-card: rgba(120, 155, 195, 0.22);
  --color-border-subtle: rgba(145, 174, 210, 0.16);
  --color-border-selected: rgba(140, 190, 255, 0.6);
  --color-border-tab: rgba(120, 155, 195, 0.18);

  /* —— Text —— */
  --color-text-primary: #e8f1ff;
  --color-text-secondary: #dbe3ee;
  --color-text-muted: #9fb0c5;
  --color-text-disabled: #667085;
  --color-text-link: #7eb4ff;
  --color-text-bright: #f4f8ff;
  --color-text-body: #dbe7f6;
  --color-text-soft: rgba(219, 231, 246, 0.62);
  --color-text-soft-2: rgba(170, 198, 225, 0.7);
  --color-text-on-selected: #f3f8ff;

  /* —— Interactive / Accent —— */
  --color-accent: #3de0d0;
  --color-accent-hover: #5ae8dc;
  --color-accent-soft: rgba(0, 168, 255, 0.18);
  --color-brand-secondary: #5aa8ff;
  --color-interactive-primary: #5aa8ff;
  --color-interactive-primary-hover: #7db7ff;

  /* —— Business semantic (frozen across themes) —— */
  --color-up: #e64545;
  --color-down: #12b886;
  --color-warning: #f0b429;
  --color-danger: #ff6b7a;
  --color-success: #2dbd6e;

  /* —— Chart UI —— */
  --chart-bg: transparent;
  --chart-axis: rgba(210, 225, 245, 0.55);
  --chart-axis-line: rgba(235, 245, 255, 0.88);
  --chart-grid: rgba(150, 175, 205, 0.2);
  --chart-label: rgba(245, 250, 255, 0.96);
  --chart-tooltip-bg: rgba(8, 20, 34, 0.94);
  --chart-tooltip-border: rgba(145, 174, 210, 0.28);
  --chart-end-label-bg: rgba(3, 10, 24, 0.82);
  --chart-zero-line: rgba(210, 225, 245, 0.55);
  --chart-crosshair: rgba(200, 220, 245, 0.45);
  --chart-line-muted-opacity: 0.55;
  --chart-line-highlight-width: 2.4;

  /* —— Elevation —— */
  --shadow-panel: 0 12px 32px rgba(0, 0, 0, 0.26);
  --shadow-floating: 0 18px 48px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 18px 48px rgba(0, 0, 0, 0.35);
  --glow-accent: 0 0 18px rgba(83, 190, 255, 0.45);
  --shadow-selected-inset: 0 0 0 1px rgba(80, 140, 210, 0.18) inset;
}

/* Formal Light — watch-flow reference */
html[data-theme="light"] {
  --color-scheme: light;

  --color-bg-page: #e8eef5;
  --color-bg-page-mid: #dde6f0;
  --color-bg-page-deep: #d0dbe8;
  --color-bg-sidebar: #f5f8fc;
  --color-bg-panel: #ffffff;
  --color-bg-panel-2: #f0f5fa;
  --color-bg-card: rgba(255, 255, 255, 0.96);
  --color-bg-elevated-soft: rgba(20, 50, 90, 0.04);
  --color-bg-overlay: rgba(232, 238, 245, 0.88);
  --color-bg-hover-soft: rgba(22, 119, 255, 0.08);
  --color-bg-topbar: rgba(245, 248, 252, 0.94);
  --color-bg-canvas: #f3f6fa;
  --color-bg-canvas-mid: #e8eef5;
  --color-bg-canvas-end: #dde6f0;
  --color-bg-canvas-glow-1: rgba(90, 140, 190, 0.1);
  --color-bg-canvas-glow-2: rgba(60, 110, 170, 0.08);
  --color-bg-mobile-chrome: #e8eef5;
  --color-bg-side-panel: rgba(255, 255, 255, 0.98);
  --color-bg-picker: rgba(248, 250, 252, 0.98);
  --color-bg-sheet: rgba(255, 255, 255, 0.96);
  --color-bg-structure-card: #ffffff;
  --color-bg-modal: linear-gradient(180deg, #ffffff 0%, #f3f7fb 100%);
  --color-bg-selected: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  --color-bg-selected-soft: rgba(37, 99, 235, 0.14);
  --color-bg-control: #dce6f0;
  --color-bg-control-hover: rgba(37, 99, 235, 0.16);
  --color-bg-inset: rgba(255, 255, 255, 0.92);
  --color-bg-track: linear-gradient(180deg, #ffffff 0%, #f3f7fb 100%);
  --color-bg-mask: rgba(15, 40, 70, 0.28);

  /* R2-B: borders slightly stronger for table/card hierarchy (text tokens frozen) */
  --color-border-default: rgba(30, 60, 100, 0.14);
  --color-border-strong: rgba(70, 110, 160, 0.34);
  --color-border-control: rgba(70, 110, 160, 0.34);
  --color-border-card: rgba(80, 120, 170, 0.26);
  --color-border-subtle: rgba(70, 110, 160, 0.2);
  --color-border-selected: rgba(37, 99, 235, 0.55);
  --color-border-tab: rgba(70, 110, 160, 0.22);

  --color-text-primary: #263b4a;
  --color-text-secondary: #566d7e;
  --color-text-muted: #748899;
  --color-text-disabled: #8a9aab;
  --color-text-link: #1677ff;
  --color-text-bright: #1f3342;
  --color-text-body: #2b3f50;
  --color-text-soft: #52697a;
  --color-text-soft-2: #647a8c;
  --color-text-on-selected: #ffffff;

  --color-accent: #0d9488;
  --color-accent-hover: #0f766e;
  --color-accent-soft: rgba(13, 148, 136, 0.12);
  --color-brand-secondary: #2563eb;
  --color-interactive-primary: #2563eb;
  --color-interactive-primary-hover: #1d4ed8;

  --color-up: #e64545;
  --color-down: #12b886;
  --color-warning: #f0b429;
  --color-danger: #ff6b7a;
  --color-success: #2dbd6e;

  /* R2-B: common chart UI less washed (structure only; series colors frozen) */
  --chart-bg: #eef3f8;
  --chart-axis: rgba(38, 59, 74, 0.82);
  --chart-axis-line: rgba(38, 59, 74, 0.62);
  --chart-grid: rgba(70, 100, 130, 0.36);
  --chart-label: rgba(38, 59, 74, 0.96);
  --chart-tooltip-bg: rgba(255, 255, 255, 0.98);
  --chart-tooltip-border: rgba(80, 120, 170, 0.34);
  --chart-end-label-bg: rgba(255, 255, 255, 0.96);
  --chart-zero-line: rgba(38, 59, 74, 0.55);
  --chart-crosshair: rgba(37, 99, 235, 0.4);
  --chart-line-muted-opacity: 0.78;
  --chart-line-highlight-width: 2.6;

  --shadow-panel: 0 10px 28px rgba(20, 40, 70, 0.1);
  --shadow-floating: 0 16px 40px rgba(20, 40, 70, 0.14);
  --shadow-modal: 0 20px 48px rgba(20, 40, 70, 0.18);
  --glow-accent: 0 0 12px rgba(13, 148, 136, 0.22);
  --shadow-selected-inset: 0 0 0 1px rgba(37, 99, 235, 0.2) inset;
}