/* Meridiani disainitokenid (#553).
 *
 * Väärtused on üle võetud Meridian.dc.html disainifailist. Kui muudad siin mõnd
 * graafikuvärvi (--up/--down/--accent/--fc/--future), pead sama muutma ka
 * js/theme.js MD_PALETTES sRGB-vastes: Plotly kirjutab värvid SVG atribuutidesse,
 * kus oklch() tugi on ebaühtlane, seega hoiame need eraldi.
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
    --bg: #f6f5f2;
    --surface: #fffefb;
    --surface2: #eeece7;
    --line: rgba(24, 26, 30, .11);
    --line2: rgba(24, 26, 30, .055);
    --ink: #181a1e;
    --ink2: #5b6068;
    --ink3: #91969e;
    --accent: oklch(.52 .13 258);
    --accent-soft: oklch(.95 .03 258);
    --up: oklch(.55 .12 152);
    --down: oklch(.56 .17 27);
    --fc: oklch(.62 .15 62);
    --fc-soft: oklch(.93 .05 70);
    --future: oklch(.975 .015 78);
    --shadow: 0 1px 2px rgba(24, 26, 30, .05), 0 6px 18px -12px rgba(24, 26, 30, .22);

    --rail-left: 232px;
    /* #559: kokkuklapitud vasaku sahtli laius — värvitäppide riba, mitte null. */
    --rail-strip: 46px;
    --rail-right: 320px;
    /* #563: kokkuklapitud Cycles-sahtel on tsüklipikkuste riba. Laiem kui vasak,
     * sest siin ei ole 15px täpp vaid .cycle-badge (min-width 38px + polster). */
    --rail-strip-right: 54px;
    --header-h: 50px;

    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

    /* #721: logo sõmpli värv. Alias, mitte koopia: sõmpel ON sama merevaik mis
     * graafiku prognoosiriba, ja disainileht nõuab, et need kaks ei triiviks
     * lahku. Koopia tuleks üle kirjutada igas kolmes tumeda teema plokis, kust
     * kaks ununeks. Kuna --fc on seal juba üle kirjutatud, järgib alias teemat
     * ise. Vt docs/meridian-brand-mark.md. */
    --md-logo-node: var(--fc);
}

:root[data-theme="dark"] {
    --bg: #0d0e11;
    --surface: #14161a;
    --surface2: #1b1e23;
    --line: rgba(255, 255, 255, .115);
    --line2: rgba(255, 255, 255, .055);
    --ink: #eceef0;
    --ink2: #99a0a9;
    --ink3: #6c737b;
    --accent: oklch(.72 .12 258);
    --accent-soft: oklch(.30 .06 258);
    --up: oklch(.70 .14 152);
    --down: oklch(.66 .17 27);
    --fc: oklch(.78 .13 68);
    --fc-soft: oklch(.32 .06 68);
    --future: oklch(.21 .015 78);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -14px rgba(0, 0, 0, .7);
}

/* Kui kasutaja pole teemat valinud, järgi süsteemi eelistust. data-theme atribuut
 * (mille theme.js alati seab) võidab mõlemas suunas. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #0d0e11;
        --surface: #14161a;
        --surface2: #1b1e23;
        --line: rgba(255, 255, 255, .115);
        --line2: rgba(255, 255, 255, .055);
        --ink: #eceef0;
        --ink2: #99a0a9;
        --ink3: #6c737b;
        --accent: oklch(.72 .12 258);
        --accent-soft: oklch(.30 .06 258);
        --up: oklch(.70 .14 152);
        --down: oklch(.66 .17 27);
        --fc: oklch(.78 .13 68);
        --fc-soft: oklch(.32 .06 68);
        --future: oklch(.21 .015 78);
    }
}