/*
 * The VS Code theme variables the panel uses (media/panel.css), with the colours of VS Code's
 * Light Modern and Dark Modern themes, following the system setting unless the page's theme switch says Light or Dark.
 * The chart colours, which colour the parts of a line, and the error colour are our own where VS Code's fall
 * below 4.5:1 as text: those of src/ui/palette.ts (test/contrast.test.ts compares them and measures them).
 */
:root {
  color-scheme: light dark;
  --vscode-font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --vscode-font-size: 13px;
  --vscode-editor-font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --vscode-editor-font-size: 13px;

  --vscode-foreground: #3b3b3b;
  --vscode-descriptionForeground: #616161;
  --vscode-errorForeground: #d0020f;
  --vscode-focusBorder: #005fb8;
  --vscode-editor-background: #ffffff;
  --vscode-editor-foreground: #3b3b3b;
  --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
  --vscode-dropdown-background: #ffffff;
  --vscode-dropdown-border: #cecece;
  --vscode-dropdown-foreground: #3b3b3b;
  --vscode-input-background: #ffffff;
  --vscode-input-border: #cecece;
  --vscode-input-foreground: #3b3b3b;
  --vscode-list-hoverBackground: #f2f2f2;
  --vscode-panel-border: #e5e5e5;
  --vscode-textBlockQuote-background: #f8f8f8;
  --vscode-textBlockQuote-border: #e5e5e5;
  --vscode-textCodeBlock-background: #f2f2f2;
  --vscode-textLink-foreground: #005fb8;
  --vscode-textLink-activeForeground: #005fb8;
  --vscode-charts-blue: #0161f8;
  --vscode-charts-green: #1f7c2b;
  --vscode-charts-orange: #9f5c00;
  --vscode-charts-purple: #5f2489;
  --vscode-charts-red: #d0020f;
  --vscode-charts-yellow: #645000;

  --page-background: #f8f8f8;
  --page-accent: #005fb8;
  --page-accent-foreground: #ffffff;
}

/* Dark: the system's choice unless Light is chosen, or Dark itself (data-theme, set by theme-init.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vscode-foreground: #cccccc;
    --vscode-descriptionForeground: #9d9d9d;
    --vscode-errorForeground: #fd6358;
    --vscode-focusBorder: #0078d4;
    --vscode-editor-background: #1f1f1f;
    --vscode-editor-foreground: #cccccc;
    --vscode-dropdown-background: #313131;
    --vscode-dropdown-border: #3c3c3c;
    --vscode-dropdown-foreground: #cccccc;
    --vscode-input-background: #313131;
    --vscode-input-border: #3c3c3c;
    --vscode-input-foreground: #cccccc;
    --vscode-list-hoverBackground: #2a2d2e;
    --vscode-panel-border: #2b2b2b;
    --vscode-textBlockQuote-background: #2b2b2b;
    --vscode-textBlockQuote-border: #616161;
    --vscode-textCodeBlock-background: #2b2b2b;
    --vscode-textLink-foreground: #4daafc;
    --vscode-textLink-activeForeground: #4daafc;
    --vscode-charts-blue: #3794ff;
    --vscode-charts-green: #89d185;
    --vscode-charts-orange: #d18616;
    --vscode-charts-purple: #b180d7;
    --vscode-charts-red: #ff5c65;
    --vscode-charts-yellow: #cca700;

    --page-background: #181818;
    --page-accent: #0078d4;
    --page-accent-foreground: #ffffff;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --vscode-foreground: #cccccc;
  --vscode-descriptionForeground: #9d9d9d;
  --vscode-errorForeground: #fd6358;
  --vscode-focusBorder: #0078d4;
  --vscode-editor-background: #1f1f1f;
  --vscode-editor-foreground: #cccccc;
  --vscode-dropdown-background: #313131;
  --vscode-dropdown-border: #3c3c3c;
  --vscode-dropdown-foreground: #cccccc;
  --vscode-input-background: #313131;
  --vscode-input-border: #3c3c3c;
  --vscode-input-foreground: #cccccc;
  --vscode-list-hoverBackground: #2a2d2e;
  --vscode-panel-border: #2b2b2b;
  --vscode-textBlockQuote-background: #2b2b2b;
  --vscode-textBlockQuote-border: #616161;
  --vscode-textCodeBlock-background: #2b2b2b;
  --vscode-textLink-foreground: #4daafc;
  --vscode-textLink-activeForeground: #4daafc;
  --vscode-charts-blue: #3794ff;
  --vscode-charts-green: #89d185;
  --vscode-charts-orange: #d18616;
  --vscode-charts-purple: #b180d7;
  --vscode-charts-red: #ff5c65;
  --vscode-charts-yellow: #cca700;

  --page-background: #181818;
  --page-accent: #0078d4;
  --page-accent-foreground: #ffffff;
}

body {
  background: var(--vscode-editor-background);
  color: var(--vscode-foreground);
  font-family: var(--vscode-font-family);
  font-size: var(--vscode-font-size);
}

/* The page's own tokens: sizes, shadows, and the arrow of a select (the panel's too). */
:root {
  --radius: 8px;
  --radius-sm: 6px;
  --bar-h: 48px;
  --control-h: 32px;
  --gutter: 7px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --hover-border: #a8a8a8;
  /* GitHub's mark is black on a light page and white on a dark one, never another colour. */
  --github-mark: #000;
  --accent-soft: rgba(0, 95, 184, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.16);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23616161' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hover-border: #5a5a5a;
    --github-mark: #fff;
    --accent-soft: rgba(0, 120, 212, 0.25);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.5);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239d9d9d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] {
  --hover-border: #5a5a5a;
  --github-mark: #fff;
  --accent-soft: rgba(0, 120, 212, 0.25);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.5);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239d9d9d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}