/* =========================================================================
   The Architect: Monolith's Fall — design tokeny

   Pravidlo, ze kterého plyne zbytek: barvu má jen to, co nese informaci.
   Lísteček, kontext, stav provozu. UI samo je achromatické — inkoust a kost.
   Proto tu není „značkový" akcent v barvě: šest typů lístečků a šest
   kontextů vyčerpá celý kruh, a sedmá barva navíc by jen šuměla.
   ========================================================================= */

:root {
  /* --- Plochy -------------------------------------------------------------
     Neutrální grafit s nádechem do tepla, ne modročerná. Papírové lístečky
     na něm čtou jako papír a ne jako svítící dlaždice.
     ---------------------------------------------------------------------- */
  --bg-0:            #121211;   /* nejhlubší podklad, tělo dokumentu */
  --bg-1:            #191917;   /* panely */
  --bg-2:            #212120;   /* karty, zdvižené plochy */
  --bg-3:            #2C2C29;   /* hover, vybrané */
  --bg-inset:        #0C0C0B;   /* zapuštěné plochy, canvas, kód */

  --line:            rgba(244, 240, 230, 0.08);
  --line-strong:     rgba(244, 240, 230, 0.17);
  --line-accent:     rgba(237, 231, 216, 0.42);

  /* --- Text -------------------------------------------------------------- */
  --fg:              #F1EDE3;
  --fg-dim:          #A8A399;   /* 6.0:1 na --bg-1 */
  --fg-faint:        #979288;   /* 5.2:1 na --bg-2 — i nejtišší text musí být čitelný */

  /* --- Akcent = papír, ne barva ------------------------------------------
     Primární tlačítko je světlá deska s tmavým tiskem: fyzická klávesa,
     ne svítící pilulka. Focus prstenec je z téhož materiálu.
     ---------------------------------------------------------------------- */
  --accent:          #EDE7D8;
  --accent-bright:   #FFFAEE;   /* hover — deska pod prstem zesvětlá */
  --accent-dim:      #B5AFA1;
  --accent-ink:      #131311;   /* text na akcentní ploše */
  --accent-tint:     rgba(237, 231, 216, 0.10);

  /* --- Stavy -------------------------------------------------------------
     Jediné tři barvy, které smí mluvit o UI — a mluví jen o provozu.
     ---------------------------------------------------------------------- */
  --ok:              #5FD98A;
  --ok-tint:         rgba(95, 217, 138, 0.14);
  --warn:            #E9B341;
  --warn-tint:       rgba(233, 179, 65, 0.14);
  --danger:          #FF6070;
  --danger-tint:     rgba(255, 96, 112, 0.14);

  /* --- Papír --------------------------------------------------------------
     Z čeho je lísteček udělaný. Barva typu se míchá s krémovou do plochy,
     s hnědou do hrany; text je tiskařská čerň, ne čistá nula.
     ---------------------------------------------------------------------- */
  --paper-cream:  #FFF8EA;
  --paper-shade:  #4A3A22;
  --paper-ink:    #16110A;
  --paper-ink-2:  #1A1509;   /* tišší tisk — popisek typu, meta */
  --paper-strike: #B4212F;   /* křížek „odebrat“ na světlém papíře */

  /* --- Lístečky Event Stormingu ------------------------------------------
     Dílenské barvy papíru. Držené sytě, ať je lísteček poznat přes celý stůl.
     ---------------------------------------------------------------------- */
  --sticky-event:     #FF9A3C;
  --sticky-command:   #4C9EFF;
  --sticky-policy:    #BE83FB;
  --sticky-hotspot:   #FF6070;
  --sticky-readmodel: #5FD98A;
  --sticky-actor:     #F2D64B;

  /* --- Barvy kontextů (rotující paleta) ---------------------------------- */
  --ctx-0: #3DDCCB;
  --ctx-1: #FF9A3C;
  --ctx-2: #A78BFA;
  --ctx-3: #5FD98A;
  --ctx-4: #F472B6;
  --ctx-5: #60A5FA;

  /* --- Spacing (4px základ) ---------------------------------------------- */
  --s1:  4px;
  --s2:  8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* --- Typografie --------------------------------------------------------
     Archivo pojmenovává, Plex Sans vypráví, Plex Mono měří.
     ---------------------------------------------------------------------- */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --t-display: clamp(38px, 5.5vw, 68px);
  --t-h1:      clamp(26px, 3vw, 36px);
  --t-h2:      21px;
  --t-h3:      17px;
  --t-body:    15px;
  --t-small:   13px;
  --t-micro:   11px;

  --lh-tight:  1.08;
  --lh-snug:   1.35;
  --lh-body:   1.6;

  /* Archivo má vlastní šířku, tak nepotřebuje tolik rozpalu jako mono. */
  --tracking-caps:    0.09em;
  --tracking-display: -0.02em;

  /* --- Tvar --------------------------------------------------------------
     Těsné rádiusy, každý povrch svůj. Jednotných 10px na všem byla ta
     nejrychlejší cesta k tomu, aby lísteček, karta i modál byly týž objekt.
     ---------------------------------------------------------------------- */
  --radius-paper:  2px;   /* lísteček — papír nemá zaoblené rohy */
  --radius-sm:     3px;   /* chipy, drobné plochy */
  --radius:        4px;   /* tlačítka, pole, karty */
  --radius-lg:     6px;   /* panely, kontexty */
  --radius-xl:     8px;   /* modály */

  /* --- Stíny a prstence --------------------------------------------------
     Vržené stíny, ne svatozáře. Světlo v místnosti přichází shora.
     ---------------------------------------------------------------------- */
  --ring:        0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .55), 0 6px 16px rgba(0, 0, 0, .32);
  --shadow-lift: 0 3px 6px rgba(0, 0, 0, .55), 0 18px 40px rgba(0, 0, 0, .45);
  --shadow-modal:0 32px 80px rgba(0, 0, 0, .70);
  --shadow-paper: 0 1px 1px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .38);

  /* --- Pohyb ------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 320ms;
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* --- Rozměry hry ------------------------------------------------------- */
  --hud-h:      56px;
  --sticky-w:   188px;
  --rail-w:     280px;
}

@media (max-width: 1279px) {
  :root {
    --sticky-w: 164px;
    --rail-w:   240px;
  }
}