/*
 * DDT themes: the tokens every DDT library and application draws with.
 *
 * - :root has the default theme in the light mode; [data-mode="dark"] has its dark mode.
 * - A theme is a [data-theme="name"] block (both modes: fonts, radii, the brand) and
 *   [data-theme="name"][data-mode="light" | "dark"] blocks (colors). Whatever a theme does not set comes from the
 *   default theme in the same mode (the cascade).
 * - ThemeHead sets data-theme and data-mode on <html> before the page is drawn (the saved choice, or the system's
 *   mode); ThemeSwitcher changes them.
 * - Colors that are also needed with an alpha have an -rgb variant ("r, g, b"): rgba(var(--ddt-shadow-rgb), 0.12).
 */
:root {
    color-scheme: light;

    /* Surfaces */
    --ddt-app-bg: #f6f8fa;
    --ddt-surface: #fff;
    --ddt-surface-rgb: 255, 255, 255;
    --ddt-surface-subtle: #f6f8fa;
    --ddt-surface-raised: #fbfbfc;
    --ddt-surface-muted: #eef1f4;
    --ddt-surface-sunken: #e3e7eb;
    --ddt-hover: #eaeef2;

    /* Text */
    --ddt-text: #1f2328;
    --ddt-text-muted: #57606a;
    --ddt-text-subtle: #6e7781;
    --ddt-text-faint: #8c959f;
    --ddt-caret: #111827;

    /* Lines */
    --ddt-border: #d0d7de;
    --ddt-border-soft: #e3e6ea;
    --ddt-border-strong: #afb8c1;
    --ddt-border-contrast: #424a53;

    /* The interface accent (buttons, selection, focus) */
    --ddt-accent: #2563eb;
    --ddt-accent-rgb: 37, 99, 235;
    --ddt-accent-strong: #1d4ed8;
    --ddt-accent-soft: #dbeafe;
    --ddt-accent-subtle: #eef4ff;
    --ddt-accent-border: #b6d4fe;
    --ddt-on-accent: #fff;
    --ddt-focus-rgb: 84, 174, 255;

    /* States: information (and links in documents), success, warning, danger */
    --ddt-info: #0969da;
    --ddt-info-rgb: 9, 105, 218;
    --ddt-info-mark: #218bff;
    --ddt-info-text: #0a3069;
    --ddt-info-bg: #ddf4ff;
    --ddt-info-bg-subtle: #f6fbff;
    --ddt-info-border: #54aeff;

    --ddt-success: #1a7f37;
    --ddt-success-mark: #2da44e;
    --ddt-success-text: #116329;
    --ddt-success-bg: #dafbe1;
    --ddt-success-border: #4ac26b;

    --ddt-warning: #9a6700;
    --ddt-warning-mark: #bf8700;
    --ddt-warning-text: #4d3b00;
    --ddt-warning-bg: #fff8c5;
    --ddt-warning-border: #d4a72c;
    --ddt-highlight: #fae17d;
    --ddt-highlight-border: #f2cc60;
    --ddt-flash-rgb: 255, 190, 0;

    --ddt-danger: #cf222e;
    --ddt-danger-strong: #a40e26;
    --ddt-danger-bg: #ffebe9;
    --ddt-danger-bg-subtle: #fff5f4;
    --ddt-danger-border: #ffcecb;
    --ddt-danger-border-strong: #ff8182;

    /* Code */
    --ddt-code-bg: #f6f8fa;
    --ddt-syntax-keyword: #cf222e;
    --ddt-syntax-type: #953800;
    --ddt-syntax-string: #0a3069;
    --ddt-syntax-number: #0550ae;
    --ddt-syntax-comment: #6e7781;
    --ddt-syntax-function: #8250df;
    --ddt-syntax-tag: #116329;
    --ddt-syntax-punctuation: #57606a;

    /* Charts (drawn as SVG: text, grid, frame and the chart's own background) */
    --ddt-chart-bg: #fff;
    --ddt-chart-text: #1f2328;
    --ddt-chart-muted: #57606a;
    --ddt-chart-grid: #e5e7eb;
    --ddt-chart-frame: #b8c0c9;

    /* Shadows and overlays */
    --ddt-shadow-rgb: 31, 35, 40;
    --ddt-overlay-rgb: 31, 35, 40;

    /* The page header and the header row of tables: where a theme shows its character (a brand color, a
       gradient). By default they follow the surfaces. */
    --ddt-header-bg: var(--ddt-surface);
    --ddt-header-text: var(--ddt-text);
    --ddt-header-muted: var(--ddt-text-muted);
    --ddt-header-hover: var(--ddt-surface-muted);
    --ddt-header-active-bg: var(--ddt-accent-subtle);
    --ddt-header-active-text: var(--ddt-accent-strong);
    --ddt-header-border: var(--ddt-border-soft);
    --ddt-header-shadow: none;
    --ddt-table-head-bg: var(--ddt-surface-muted);
    --ddt-table-head-text: var(--ddt-text);
    --ddt-table-head-border: var(--ddt-border);
    --ddt-table-head-case: none;
    --ddt-table-head-spacing: normal;

    /* Shape and type */
    --ddt-font: "Segoe UI", system-ui, sans-serif;
    --ddt-font-mono: Consolas, "Cascadia Mono", "Liberation Mono", monospace;
    --ddt-radius-sm: 4px;
    --ddt-radius: 6px;
    --ddt-radius-lg: 8px;
}

/* The default theme, dark mode: only the colors (shape and type stay). */
[data-mode="dark"] {
    color-scheme: dark;

    --ddt-app-bg: #0d1117;
    --ddt-surface: #161b22;
    --ddt-surface-rgb: 22, 27, 34;
    --ddt-surface-subtle: #1c2128;
    --ddt-surface-raised: #1c2128;
    --ddt-surface-muted: #21262d;
    --ddt-surface-sunken: #0d1117;
    --ddt-hover: #262c36;

    --ddt-text: #e6edf3;
    --ddt-text-muted: #9da7b3;
    --ddt-text-subtle: #8b949e;
    --ddt-text-faint: #6e7681;
    --ddt-caret: #e6edf3;

    --ddt-border: #30363d;
    --ddt-border-soft: #262c34;
    --ddt-border-strong: #484f58;
    --ddt-border-contrast: #8b949e;

    --ddt-accent: #3b82f6;
    --ddt-accent-rgb: 59, 130, 246;
    --ddt-accent-strong: #60a5fa;
    --ddt-accent-soft: #1e3a5f;
    --ddt-accent-subtle: #172a45;
    --ddt-accent-border: #2f5d9e;
    --ddt-on-accent: #fff;
    --ddt-focus-rgb: 56, 139, 253;

    --ddt-info: #58a6ff;
    --ddt-info-rgb: 88, 166, 255;
    --ddt-info-mark: #388bfd;
    --ddt-info-text: #a5d6ff;
    --ddt-info-bg: #0c2d4f;
    --ddt-info-bg-subtle: #0d1f33;
    --ddt-info-border: #1f6feb;

    --ddt-success: #3fb950;
    --ddt-success-mark: #2ea043;
    --ddt-success-text: #7ee787;
    --ddt-success-bg: #0f2d1a;
    --ddt-success-border: #238636;

    --ddt-warning: #d29922;
    --ddt-warning-mark: #bb8009;
    --ddt-warning-text: #f2cc60;
    --ddt-warning-bg: #3a2d06;
    --ddt-warning-border: #9e6a03;
    --ddt-highlight: #5a4a0c;
    --ddt-highlight-border: #9e6a03;
    --ddt-flash-rgb: 210, 153, 34;

    --ddt-danger: #f85149;
    --ddt-danger-strong: #ff7b72;
    --ddt-danger-bg: #3d1418;
    --ddt-danger-bg-subtle: #2a1215;
    --ddt-danger-border: #8e1519;
    --ddt-danger-border-strong: #da3633;

    --ddt-code-bg: #11161d;
    --ddt-syntax-keyword: #ff7b72;
    --ddt-syntax-type: #ffa657;
    --ddt-syntax-string: #a5d6ff;
    --ddt-syntax-number: #79c0ff;
    --ddt-syntax-comment: #8b949e;
    --ddt-syntax-function: #d2a8ff;
    --ddt-syntax-tag: #7ee787;
    --ddt-syntax-punctuation: #9da7b3;

    --ddt-chart-bg: #161b22;
    --ddt-chart-text: #e6edf3;
    --ddt-chart-muted: #9da7b3;
    --ddt-chart-grid: #30363d;
    --ddt-chart-frame: #484f58;

    --ddt-shadow-rgb: 0, 0, 0;
    --ddt-overlay-rgb: 1, 4, 9;
}

/* The theme switcher (ThemeSwitcher). */
.ddt-theme-switcher {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.ddt-theme-select {
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-surface);
    color: var(--ddt-text);
    font: 13px var(--ddt-font);
}