/* =====================================================================
   WUE — designové proměnné
   Verze 1.0 · listopad 2026
   ---------------------------------------------------------------------
   1. PÍSMA      self-hosted woff2, latin + latin-ext
   2. ODSTÍNY    surové rampy — v kódu se na ně nesaháme přímo
   3. PŘECHODY   značkové gradienty, jediné povolené
   4. ROLE       co se kde používá. Tohle píšeme do CSS.
   Tmavý režim přepisuje jen vrstvu ROLE.
   ===================================================================== */

/* ------------------------------------------------------------------ 1 */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans-lat.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  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: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans-ext.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-lat.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  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: "Figtree";
  src: url("fonts/figtree-ext.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/dm-mono-500-lat.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  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: "DM Mono";
  src: url("fonts/dm-mono-500-ext.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ------------------------------------------------------------------ 2 */

:root {
  /* Fialová — hloubka značky. Odstín 262–265, nikdy ne růžová. */
  --f-50:  #F6F1FD;
  --f-100: #EDE3FC;
  --f-200: #D9C4F8;
  --f-300: #B893F0;
  --f-400: #9965E6;
  --f-500: #7C40DD;
  --f-600: #612AC0;
  --f-700: #4D2395;
  --f-800: #3B1C6E;
  --f-900: #2B154C;

  /* Modrá — světlo značky. Odstín 226–236. */
  --m-50:  #F0F3FF;
  --m-100: #E0E8FF;
  --m-200: #BECCFD;
  --m-300: #89A0FA;
  --m-400: #5C75F5;
  --m-500: #314DED;
  --m-600: #1E36CC;
  --m-700: #1C2B9C;
  --m-800: #172072;
  --m-900: #13174E;

  /* Neutrály — levandulový podtón, odstín 228–250. Žádná čistá šedá. */
  --n-0:   #FFFFFF;
  --n-25:  #FBFBFE;
  --n-50:  #F2F5FD;
  --n-100: #E8EBF7;
  --n-150: #E4EAFD;
  --n-200: #D5D9EB;
  --n-300: #BABED8;
  --n-400: #8F93B7;
  --n-500: #696A96;
  --n-600: #625C96;
  --n-700: #56508A;
  --n-800: #3B385C;
  --n-900: #271F63;
  --n-950: #19152E;

  /* Jiskra — oranžová. Nadtitulky, zvýraznění, jedna ze tří ikon. */
  --o-50:  #FFF3E6;
  --o-100: #FFE2C2;
  --o-300: #FFB24D;
  --o-400: #FF9E2E;
  --o-500: #FF8A00;
  --o-600: #C45308;
  --o-700: #B04B07;

  /* Zdarma / hotovo — zelená */
  --z-50:  #E7FBF1;
  --z-100: #C7F5DE;
  --z-300: #5DE7A9;
  --z-400: #17D37C;
  --z-600: #0C7946;
  --z-700: #0A6B3E;

  /* Chyba — karmín */
  --c-50:  #FDECEF;
  --c-100: #FBD2D9;
  --c-300: #F07F90;
  --c-500: #CE1C34;
  --c-600: #B4162B;

  /* ---------------------------------------------------------------- 3 */
  /* Přechody. Jiné se v identitě nevyskytují.                          */
  --prechod-znacka:   linear-gradient(135deg, #612AC0 0%, #314DED 100%);
  --prechod-hero:     linear-gradient(152deg, #3B1C6E 0%, #4D2395 38%, #2A3FD9 100%);
  --prechod-tlacitko: linear-gradient(135deg, #7C40DD 0%, #314DED 100%);
  --prechod-plocha:   linear-gradient(180deg, #FFFFFF 0%, #F6F8FE 100%);
  --prechod-ikona-a:  linear-gradient(140deg, #9965E6 0%, #5C75F5 100%);
  --prechod-ikona-b:  linear-gradient(140deg, #FFA02E 0%, #F2566F 100%);
  --prechod-ikona-c:  linear-gradient(140deg, #C45ED6 0%, #7C40DD 100%);

  /* ---------------------------------------------------------------- 4 */
  /* Plochy */
  --wue-papir:        var(--n-50);
  --wue-plocha:       var(--n-0);
  --wue-plocha-ticha: var(--n-100);
  --wue-plocha-modra: var(--m-50);
  --wue-pruh:         var(--n-150);
  --wue-plocha-tmava: var(--f-800);

  /* Text */
  --wue-text:    var(--n-900);   /* 14,4 : 1 na bílé — nadpisy i běžný text */
  --wue-text-2:  var(--n-700);   /*  7,2 : 1 */
  --wue-text-3:  var(--n-600);   /*  6,0 : 1 — nejtišší povolený text */
  --wue-text-na-tmavem:   #FFFFFF;
  --wue-text-na-tmavem-2: #D6CDF5;

  /* Linky */
  --wue-linka:       var(--n-200);
  --wue-linka-ticha: var(--n-100);
  --wue-linka-silna: var(--n-300);

  /* Značka a interakce */
  --wue-fialova:    var(--f-700);
  --wue-modra:      var(--m-600);   /* odkazy, aktivní stav, ikony */
  --wue-modra-ziva: var(--m-500);   /* grafy, zaměření */
  --wue-modra-ticha: var(--m-100);
  --wue-jiskra:      var(--o-500);  /* výplň a text na tmavém */
  --wue-jiskra-text: var(--o-700);  /* 5,5 : 1 na bílé — nadtitulky na světlém */
  --wue-jiskra-ticha: var(--o-50);
  --wue-zamereni:   var(--m-500);

  /* Stavy */
  --wue-hotovo:      var(--z-600);  --wue-hotovo-plocha: var(--z-50);
  --wue-zdarma:      var(--z-400);  /* jen jako výplň, text na ní je inkoust */
  --wue-ceka:        var(--o-700);  --wue-ceka-plocha:   var(--o-50);
  --wue-chyba:       var(--c-500);  --wue-chyba-plocha:  var(--c-50);

  /* Mřížka — krok 8 px */
  --m1: 4px;   --m2: 8px;   --m3: 12px;  --m4: 16px;
  --m5: 24px;  --m6: 32px;  --m7: 48px;  --m8: 64px;
  --m9: 96px;  --m10: 128px; --m11: 160px; --m12: 224px;
  --wue-sloupec: 1240px;
  --wue-okraj: clamp(20px, 5vw, 64px);

  /* Rohy — systém je měkký, ale ne nafouknutý */
  --r-1: 8px;    /* štítky, drobná pole */
  --r-2: 12px;   /* tlačítka, vstupy */
  --r-3: 20px;   /* karty */
  --r-4: 28px;   /* velké panely, rámeček snímku */
  --r-pill: 999px;

  /* Stíny — fialové, ne šedé. Posun ≈ polovina rozostření. */
  --stin-1: 0 1px 2px rgba(39,31,99,.05), 0 2px 6px -1px rgba(39,31,99,.06);
  --stin-2: 0 4px 10px -2px rgba(39,31,99,.08), 0 10px 24px -6px rgba(39,31,99,.10);
  --stin-3: 0 10px 24px -8px rgba(39,31,99,.12), 0 24px 56px -16px rgba(39,31,99,.16);
  --stin-4: 0 30px 60px -22px rgba(39,31,99,.30), 0 60px 120px -48px rgba(39,31,99,.28);
  --stin-barevny: 0 8px 18px -6px rgba(84,46,200,.42), 0 2px 4px rgba(84,46,200,.18);

  /* Písma */
  --p-nadpis: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --p-text:   "Figtree", "Segoe UI", system-ui, sans-serif;
  --p-kod:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-mikro: .75rem;    /* 12 */
  --t-maly:  .875rem;   /* 14 */
  --t-text:  1.0625rem; /* 17 */
  --t-vetsi: 1.1875rem; /* 19 */
  --t-h4:    1.375rem;  /* 22 */
  --t-h3:    1.75rem;   /* 28 */
  --t-h2:    2.25rem;   /* 36 */
  --t-h1:    3rem;      /* 48 */
  --t-titul: clamp(2.6rem, 5.4vw, 4.5rem);

  /* Pohyb */
  --pohyb-rychle: 140ms cubic-bezier(.22, .7, .25, 1);
  --pohyb-klidne: 260ms cubic-bezier(.22, .7, .25, 1);
  --pohyb-hravy:  420ms cubic-bezier(.34, 1.2, .5, 1);

  /* Úhel ramene značky */
  --wue-uhel: 32.619deg;

  color-scheme: light;
}

/* ---------------------------------------------------------------- tmavý */
/* Řídí se výhradně předvolbou systému. Ruční přepínač web neměl čím
   ovládat a na telefonu jen ubíral místo v hlavičce.
   Tmavý režim není převrácený světlý. Papír se mění ve fialovou noc:
   plochy se zvedají teplem fialové, ne šedí, přechody ztmavnou o dva
   stupně a stíny nahradí jemná světlá linka. */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --prechod-hero:     linear-gradient(152deg, #200F40 0%, #2E1560 42%, #16227A 100%);
    --prechod-plocha:   linear-gradient(180deg, #1B1640 0%, #171235 100%);
    --prechod-tlacitko: linear-gradient(135deg, #8E58E4 0%, #4A63F0 100%);

    --wue-papir:        #120E2B;
    --wue-plocha:       #1B1640;
    --wue-plocha-ticha: #241D52;
    --wue-plocha-modra: #1A2156;
    --wue-pruh:         #211A4B;
    --wue-plocha-tmava: #0C0920;

    --wue-text:    #F1EEFC;
    --wue-text-2:  #B9B2DE;
    --wue-text-3:  #968FC2;
    --wue-text-na-tmavem:   #FFFFFF;
    --wue-text-na-tmavem-2: #D6CDF5;

    --wue-linka:       #332B63;
    --wue-linka-ticha: #272150;
    --wue-linka-silna: #473D80;

    --wue-fialova:     var(--f-300);
    --wue-modra:       var(--m-300);
    --wue-modra-ziva:  var(--m-400);
    --wue-modra-ticha: #1C2458;
    --wue-jiskra:      var(--o-400);
    --wue-jiskra-text: var(--o-300);
    --wue-jiskra-ticha: #3A2410;
    --wue-zamereni:    var(--m-300);

    --wue-hotovo: var(--z-300);  --wue-hotovo-plocha: #0C3328;
    --wue-ceka:   var(--o-300);  --wue-ceka-plocha:   #342310;
    --wue-chyba:  var(--c-300);  --wue-chyba-plocha:  #3A1620;

    --stin-1: 0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(171,153,246,.08);
    --stin-2: 0 6px 14px -4px rgba(0,0,0,.5), 0 0 0 1px rgba(171,153,246,.10);
    --stin-3: 0 14px 30px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(171,153,246,.12);
    --stin-4: 0 34px 70px -26px rgba(0,0,0,.75), 0 0 0 1px rgba(171,153,246,.14);
    --stin-barevny: 0 10px 22px -8px rgba(124,64,221,.6);
  }
}

/* ------------------------------------------------------------ základ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--wue-papir);
  color: var(--wue-text-2);
  font-family: var(--p-text);
  font-size: var(--t-text);
  line-height: 1.62;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--p-nadpis);
  font-weight: 800;
  color: var(--wue-text);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -.025em; }
h2 { font-size: var(--t-h2); line-height: 1.14; letter-spacing: -.022em; }
h3 { font-size: var(--t-h3); line-height: 1.22; letter-spacing: -.018em; }
h4 { font-size: var(--t-h4); line-height: 1.3;  letter-spacing: -.012em; font-weight: 700; }
p  { margin: 0 0 1em; max-width: 66ch; text-wrap: pretty; }

a { color: var(--wue-modra); text-underline-offset: .18em;
    text-decoration-thickness: from-font; }
a:hover { text-decoration-color: var(--wue-jiskra); }

:focus-visible {
  outline: 3px solid var(--wue-zamereni);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

code, kbd, samp, .kod {
  font-family: var(--p-kod); font-size: .9em; letter-spacing: .01em;
}

.cisla { font-variant-numeric: tabular-nums lining-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}