/* pws-base.css - společný základ hlavní stránky i reportu čidel: písma a tokeny z DESIGN.md.
   Hlavní stránka ho načítá v <head> (PWS_index2.php), report ještě sám pro případ,
   že se otevře samostatně - dvojí načtení téhož souboru nevadí. */


/* IBM Plex (OFL, css/fonts/OFL.txt) z vlastního serveru: písmo se dřív jen jmenovalo
   a každé zařízení dosadilo něco jiného, takže čísla v tabulkách měla všude jinou šířku.
   Jen řezy 400 a 600 - 500 a 700 dosadí prohlížeč z nejbližšího. latin-ext (česká
   diakritika) se stáhne až ve chvíli, kdy na stránce opravdu je. */
@font-face {
  font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {

    --pr-ground: #131618;
    --pr-surface: #191d1f;
    --pr-surface-2: #202628;
    --pr-line: #2b3234;
    --pr-line-soft: #232a2c;
    --pr-ink: #e7edee;
    --pr-ink-dim: #8e9ba1;
    --pr-ink-faint: #637076;
    --pr-sad: #00e396;
    --pr-zast: #a56eff;
    --pr-warn: #e0a33a;
    --pr-ok: #4cc38a;
    --pr-bad: #f05545;
    --pr-grid: rgba(255, 255, 255, .055);
    --pr-hum-bg: rgba(59, 130, 246, .15);
    --pr-hum-bd: rgba(59, 130, 246, .38);
    --pr-hum-ink: #93c5fd;
    /* barvy veličin hlavní stránky (DESIGN.md, Barvy veličin): ikona, tón karty, přístroj, graf;
       nikdy na číslech, ta patří teplotní škále a inkoustu */
    --q-wind: #70c8cd;
    --q-rain: #6fa7ee;
    --q-baro: #d897bb;
    --q-sun: #e0c04f;
    /* poryv v grafu větru: vlastní modrá, aby se od větru odlišil barvou, ne jen čárkováním */
    --q-gust: #8aa9ff;
    --q-around: #99aec0;
    --pr-band-dry: rgba(79, 163, 204, .045);
    --pr-band-ok: rgba(63, 191, 158, .04);
    --pr-band-humid: rgba(224, 192, 79, .05);
    --pr-band-mug: rgba(217, 93, 56, .055);
    --pr-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px rgba(0, 0, 0, .38);
    --pr-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pr-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Text je sans, mono jen data - čísla, časy, data, kde stejná šířka číslic
       drží sloupce. Mono na každém popisku jen rozšiřovalo text a na telefonu ho lámalo. */
    --pr-fs-label: 11px;
    --pr-fs-note: 12px;
    --pr-fs-body: 13px;
    --pr-fs-control: 14px;
}

/* Světlé tokeny visí na <html>, ne na #pws-report: platí tak pro hlavní stránku i report.
   Tooltip reportu visí na <body> a dědí je odtud. */
html.light {

    --pr-ground: #edf0f1;
    --pr-surface: #ffffff;
    --pr-surface-2: #f4f7f8;
    --pr-line: #dde3e5;
    --pr-line-soft: #e8edee;
    --pr-ink: #151a1c;
    --pr-ink-dim: #58656b;
    --pr-ink-faint: #85929a;
    --pr-sad: #009e6e;
    --pr-zast: #7440cf;
    --pr-warn: #8f5d10;   /* #b47612 mělo na bílé 3,8:1; i na vlastním podbarvení štítku musí držet 4,5:1 */
    --pr-ok: #1a7a51;     /* #1f8a5c mělo na bílé 4,3:1 */
    --pr-bad: #c62f22;
    --pr-grid: rgba(0, 0, 0, .06);
    --pr-band-dry: rgba(79, 163, 204, .05);
    --pr-band-ok: rgba(63, 191, 158, .045);
    --pr-band-humid: rgba(224, 192, 79, .06);
    --pr-band-mug: rgba(217, 93, 56, .06);
    --pr-shadow: 0 1px 2px rgba(16, 24, 28, .06), 0 8px 24px rgba(16, 24, 28, .07);

    /* světle modrý text tmavé pilulky měl na bílé kontrast 1,8:1 */
    --pr-hum-bg: rgba(37, 99, 235, .09);
    --pr-hum-bd: rgba(37, 99, 235, .32);
    --pr-hum-ink: #1d4ed8;
    /* stejné odstíny ztmavené na kontrast nad 5:1 proti bílé kartě */
    --q-wind: #007277;
    --q-rain: #1d5ab0;
    --q-baro: #94436d;
    --q-sun: #866300;
    --q-gust: #3557c4;
    --q-around: #506679;
}

/* Plochy prohlížeče podle palety (DESIGN.md): posuvníky a ovládací prvky v barvě tématu,
   výběr textu a fokus ve fialové čidla Dvůr, stejně jako fokus v reportu. */
:root { color-scheme: dark; }
html.light { color-scheme: light; }

::selection {
  background: color-mix(in srgb, var(--pr-zast) 35%, transparent);
  color: var(--pr-ink);
}

:focus-visible {
  outline: 2px solid var(--pr-zast);
  outline-offset: 2px;
}