/*
 * 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.
 */
: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: #e51400;
  --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: #1a85ff;
  --vscode-charts-green: #388a34;
  --vscode-charts-orange: #c26b00;
  --vscode-charts-purple: #652d90;
  --vscode-charts-red: #e51400;
  --vscode-charts-yellow: #8f6800;

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

@media (prefers-color-scheme: dark) {
  :root {
    --vscode-foreground: #cccccc;
    --vscode-descriptionForeground: #9d9d9d;
    --vscode-errorForeground: #f85149;
    --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: #f14c4c;
    --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);
}