/*
 * Dark values for the shell's semantic tokens.
 *
 * Imported by the shell renderer, the update window and the web landing. The
 * editor modules' chrome is not on the token layer yet (DESIGN.md §4), so a
 * dark palette there would leave half of every ribbon light. Kept out of
 * tokens.css for the same reason, and so tokens.ts's drift test, which reads
 * tokens.css, is untouched.
 *
 * Two ways in, with the same values:
 *  - [data-appearance='dark'] on <html>: Settings › General › Appearance =
 *    Dark. Both hosts set it (the desktop renderer from the IPC setting, the
 *    web landing from localStorage); 'light' and 'system' leave it off or set
 *    it to 'light'.
 *  - prefers-color-scheme: dark, only while the attribute is absent or not
 *    'dark'/'light', i.e. Appearance = System. The update window has no
 *    setting UI and stays on this path: main sets nativeTheme.themeSource,
 *    which drives the media query for every window.
 * CSS cannot share one block between a selector and a media query, so the
 * values are duplicated on purpose; tokens-dark.test.ts fails on drift.
 *
 * The suite chrome (account menu, app switcher) gets the design system's own
 * dark mapping here rather than in suite-chrome.css, so Docs web, which loads
 * suite-chrome.css but not this file, stays light next to its light ribbon.
 */

:root {
  /* Text and icons on a primary-coloured fill. White in both schemes: the
   * light scheme's bg-white-0 happens to be white, but its dark value is not. */
  --color-text-on-primary: #ffffff;
}

:root[data-appearance='dark'] {
  --color-text-strong-950: #ececed;
  --color-text-secondary-700: #b6b9bd;
  --color-text-sub-600: #8a8e93;
  --color-bg-white-0: #1c1d1f;
  --color-bg-weak-50: #232427;
  --color-bg-weak-100: #2d2e32;
  --color-stroke-soft-200: #303135;
  --color-stroke-strong-300: #5d6066;
  --color-primary-base: #4a84ee;
  --color-primary-hover: #6a9cf5;
  --color-primary-weak: #1c2945;
  --color-state-error-base: #ef5b5f;
  --color-state-error-weak: #3a1f21;
  --color-state-warning-base: #f5a623;
  color-scheme: dark;
}

:root[data-appearance='dark'] .tab-bar {
  --tabstrip-bg: #202124;
  --tabstrip-text: #c4c7c5;
  --tabstrip-text-active: #e8eaed;
  --tab-separator: rgba(255, 255, 255, 0.18);
  --tabstrip-hover-plate: rgba(255, 255, 255, 0.08);
  --tabstrip-hover-close: rgba(255, 255, 255, 0.16);
  --tabstrip-hover: rgba(255, 255, 255, 0.12);
}

:root[data-appearance='dark'] .onb-overlay {
  --onb-btn-primary-hover: #d4d5d7;
  --onb-border-strong: var(--color-stroke-strong-300);
}

:root[data-appearance='dark'] .wexxaro-suite-chrome,
:root[data-appearance='dark'] [data-radix-popper-content-wrapper] {
  color-scheme: dark;
  --bg: var(--gray-900);
  --bg-subtle: #0b1220;
  --bg-raised: var(--gray-800);
  --bg-overlay: var(--gray-800);
  --bg-sidebar: #0b1220;
  --fg: var(--gray-50);
  --fg-muted: var(--gray-300);
  --muted: var(--gray-400);
  --accent: var(--accent-400);
  --accent-fg: var(--gray-900);
  --accent-hover: var(--accent-300);
  --accent-subtle: #1c2b45;
  --border: var(--gray-700);
  --border-strong: var(--gray-400);
  --border-subtle: var(--gray-800);
  --hover: var(--gray-800);
  --selected: #1c2b45;
  --bg-scrim: rgba(0, 0, 0, 0.6);
  --danger: #f87171;
  --danger-fg: var(--gray-900);
  --danger-subtle: #2a1416;
  --danger-border: #ef4444;
  --focus-ring: var(--accent-400);
  --success: #4ade80;
  --warning: #fbbf24;
  --chart-1: var(--accent-400);
  --chart-2: #2dd4bf;
  --chart-3: #a78bfa;
  --chart-4: #fbbf24;
  --chart-5: #f472b6;
  --avatar-0-bg: #1e3a8a;
  --avatar-0-fg: #bfdbfe;
  --avatar-1-bg: #134e4a;
  --avatar-1-fg: #99f6e4;
  --avatar-2-bg: #4c1d95;
  --avatar-2-fg: #ddd6fe;
  --avatar-3-bg: #78350f;
  --avatar-3-fg: #fde68a;
  --avatar-4-bg: #831843;
  --avatar-4-fg: #fbcfe8;
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-appearance='light']):not([data-appearance='dark']) {
    --color-text-strong-950: #ececed;
    --color-text-secondary-700: #b6b9bd;
    --color-text-sub-600: #8a8e93;
    --color-bg-white-0: #1c1d1f;
    --color-bg-weak-50: #232427;
    --color-bg-weak-100: #2d2e32;
    --color-stroke-soft-200: #303135;
    --color-stroke-strong-300: #5d6066;
    --color-primary-base: #4a84ee;
    --color-primary-hover: #6a9cf5;
    --color-primary-weak: #1c2945;
    --color-state-error-base: #ef5b5f;
    --color-state-error-weak: #3a1f21;
    --color-state-warning-base: #f5a623;
    color-scheme: dark;
  }

  :root:not([data-appearance='light']):not([data-appearance='dark']) .tab-bar {
    --tabstrip-bg: #202124;
    --tabstrip-text: #c4c7c5;
    --tabstrip-text-active: #e8eaed;
    --tab-separator: rgba(255, 255, 255, 0.18);
    --tabstrip-hover-plate: rgba(255, 255, 255, 0.08);
    --tabstrip-hover-close: rgba(255, 255, 255, 0.16);
    --tabstrip-hover: rgba(255, 255, 255, 0.12);
  }

  :root:not([data-appearance='light']):not([data-appearance='dark']) .onb-overlay {
    --onb-btn-primary-hover: #d4d5d7;
    --onb-border-strong: var(--color-stroke-strong-300);
  }

  :root:not([data-appearance='light']):not([data-appearance='dark']) .wexxaro-suite-chrome,
  :root:not([data-appearance='light']):not([data-appearance='dark']) [data-radix-popper-content-wrapper] {
    color-scheme: dark;
    --bg: var(--gray-900);
    --bg-subtle: #0b1220;
    --bg-raised: var(--gray-800);
    --bg-overlay: var(--gray-800);
    --bg-sidebar: #0b1220;
    --fg: var(--gray-50);
    --fg-muted: var(--gray-300);
    --muted: var(--gray-400);
    --accent: var(--accent-400);
    --accent-fg: var(--gray-900);
    --accent-hover: var(--accent-300);
    --accent-subtle: #1c2b45;
    --border: var(--gray-700);
    --border-strong: var(--gray-400);
    --border-subtle: var(--gray-800);
    --hover: var(--gray-800);
    --selected: #1c2b45;
    --bg-scrim: rgba(0, 0, 0, 0.6);
    --danger: #f87171;
    --danger-fg: var(--gray-900);
    --danger-subtle: #2a1416;
    --danger-border: #ef4444;
    --focus-ring: var(--accent-400);
    --success: #4ade80;
    --warning: #fbbf24;
    --chart-1: var(--accent-400);
    --chart-2: #2dd4bf;
    --chart-3: #a78bfa;
    --chart-4: #fbbf24;
    --chart-5: #f472b6;
    --avatar-0-bg: #1e3a8a;
    --avatar-0-fg: #bfdbfe;
    --avatar-1-bg: #134e4a;
    --avatar-1-fg: #99f6e4;
    --avatar-2-bg: #4c1d95;
    --avatar-2-fg: #ddd6fe;
    --avatar-3-bg: #78350f;
    --avatar-3-fg: #fde68a;
    --avatar-4-bg: #831843;
    --avatar-4-fg: #fbcfe8;
    --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  }
}