/*
 * Design tokens: every colour, size and radius the site uses, as CSS variables. Nothing else in the CSS has a
 * hard-coded colour, so a theme or an accent is a change in this file only.
 *
 * Theme: light or dark. Without a saved choice the browser's setting decides (prefers-color-scheme); a saved choice
 * sets data-theme="light" or "dark" on <html> (assets/js/theme-init.js, before the first paint).
 * Accent: data-accent="purple|teal|blue|amber" on <html>, purple by default.
 */

:root {
    /* type and shape */
    --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
    --fs: 15px;
    --r: 16px;
    --r-sm: 12px;
    --cell: 14px 18px;
    --gap: 20px;
    --wrap: 1200px;

    /* the accents the visitor can choose from; the picker in the header uses the same variables */
    --accent-purple: #5b21b6;
    --accent-teal: #0f766e;
    --accent-blue: #1d4ed8;
    --accent-amber: #b45309;

    /* the two networks: the dot of the switch in the header (on the dark band in both themes) and the line under the header of the testnet */
    --net-mainnet: #4ade80;
    --net-testnet: #fbbf24;
    /* text on the amber of the testnet (the development footer's badge and warning chips) */
    --on-net-testnet: #2b1d00;

    /* the accent in use (purple unless data-accent says otherwise) */
    --accent: var(--accent-purple);
    --accent-ink: #fff;

    /* what is drawn on the dark brand band (header, hero): text, muted text, outlines, hover */
    --on-band: #fff;
    --on-band-muted: rgba(255, 255, 255, .78);
    --on-band-line: rgba(255, 255, 255, .28);
    --on-band-hover: rgba(255, 255, 255, .12);

    /* light theme */
    --field-bg: #fff;
    --field-text: #18202b;
    --field-placeholder: #566275;
    /* the edge of every text field (.search, .find, the date, the 404 and the phone search): 3.6:1 on a white card (WCAG 1.4.11), so a field is seen as one,
       not only by its placeholder (#848) */
    --field-border: #7d8899;
    --band: #1d1829;
    --bg: #f4f6f9;
    --surface: #fff;
    --surface2: #eef1f6;
    --border: #dde3ec;
    --text: #18202b;
    --muted: #566275;
    /* a darker grey for text on a tinted background (the darkest hardware tiles), from the theme's own text and surface (#768) */
    --muted-strong: color-mix(in srgb, var(--text) 80%, var(--surface));
    /* #0a6640, not #0f7a4d: the .ok badge (this colour on 15 % of itself) reaches 5.6:1, the old one 4.35:1 (#767) */
    --ok: #0a6640;
    --bad: #b42318;
    /* #7d4a06, not #8a5208: the warn badge (this colour on 15 % of itself) reaches 5.0:1, the old one 4.35:1 (#848) */
    --warn: #7d4a06;
    /* Light: the accent itself, except teal and amber, whose own shades are under 4.5:1 on --accent-soft in a hovered row (--accent-link below, #768) */
    --accent-text: var(--accent-link, var(--accent));
    --shadow: 0 1px 2px rgba(16, 24, 40, .06);
    --header-shadow: 0 6px 18px rgba(16, 24, 40, .28);
    /* chart series (validated categorical slots 1 to 3 against the card surface, see Docs/FRONTEND.md) */
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --series-4: #7c4dd6;
    --series-5: #b9a0ee;
    --series-6: #1a97a4;
    /* the whale comparison: one colour per group, from shrimp to humpback */
    --group-shrimp: #8a94a6;
    --group-fish: #2a78d6;
    --group-dolphin: #1baf7a;
    --group-shark: #eb6834;
    --group-whale: #5b21b6;
    --group-humpback: #b42318;
}

:root[data-accent="teal"] { --accent: var(--accent-teal); --accent-link: #0b655e; /* 6.9:1 on the surface, 5.1:1 on --accent-soft in a hovered row; dark mode mixes its own (#768) */ }
:root[data-accent="blue"] { --accent: var(--accent-blue); }
:root[data-accent="amber"] { --accent: var(--accent-amber); --accent-link: #954507; /* 6.7:1 on the surface, 4.9:1 on --accent-soft in a hovered row; dark mode mixes its own (#768) */ }

/* dark theme: by the browser's setting unless the visitor chose light ... */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --field-bg: #1c2532;
        --field-text: #e8edf4;
        --field-placeholder: #9aa8bb;
        --field-border: #6a7890;
        --band: #120e1c;
        --bg: #0d1218;
        --surface: #151c26;
        --surface2: #1c2532;
        --border: #283344;
        --text: #e8edf4;
        --muted: #9aa8bb;
        --ok: #4ade80;
        --bad: #f87171;
        --warn: #fbbf24;
        --accent-text: color-mix(in srgb, var(--accent) 55%, #fff);
        --shadow: none;
        --header-shadow: 0 6px 18px rgba(0, 0, 0, .55);
        --series-1: #3987e5;
        --series-2: #d95926;
        --series-3: #199e70;
        --series-4: #a785f2;
        --series-5: #cdb4fb;
        --series-6: #2bb3c0;
        --group-shrimp: #9aa8bb;
        --group-fish: #3987e5;
        --group-dolphin: #199e70;
        --group-shark: #d95926;
        --group-whale: #8b5cf6;
        --group-humpback: #f87171;
    }
}

/* ... or by the visitor's choice */
:root[data-theme="dark"] {
    --field-bg: #1c2532;
    --field-text: #e8edf4;
    --field-placeholder: #9aa8bb;
    --field-border: #6a7890;
    --band: #120e1c;
    --bg: #0d1218;
    --surface: #151c26;
    --surface2: #1c2532;
    --border: #283344;
    --text: #e8edf4;
    --muted: #9aa8bb;
    --ok: #4ade80;
    --bad: #f87171;
    --warn: #fbbf24;
    --accent-text: color-mix(in srgb, var(--accent) 55%, #fff);
    --shadow: none;
    --header-shadow: 0 6px 18px rgba(0, 0, 0, .55);
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #a785f2;
    --series-5: #cdb4fb;
    --series-6: #2bb3c0;
    --group-shrimp: #9aa8bb;
    --group-fish: #3987e5;
    --group-dolphin: #199e70;
    --group-shark: #d95926;
    --group-whale: #8b5cf6;
    --group-humpback: #f87171;
}

:root {
    --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
}