/* ==========================================================================
   AFIRE — design tokens
   Koncept: "Precizní žár" — grafitový základ + ember (žár) + cyan (měření)
   Typografie (varianta 2): Space Grotesk (nadpisy) / Inter (text) / IBM Plex Mono (čísla)

   PRAVIDLO AKCENTŮ (drž ho přísně):
   - ember  = oheň / akce / CTA / teplo
   - cyan   = jen data, jednotky, grafy, hover stavy (střídmě!)
   - neutrály (grafit + ocelová šedá + světlá) nesou ~80 % plochy
   - tmavé sekce prokládat světlými, aby web "dýchal" a nevyzněl chladně
   ========================================================================== */

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

:root {
  /* --- Neutrály / základ --- */
  --c-grafit:        #16191D;   /* tmavé pozadí, prémiové, čísla na něm "svítí" */
  --c-surface-dark:  #21262D;   /* tmavé karty / panely */
  --c-line-dark:     #2E343C;   /* linky a oddělovače na tmavém */
  --c-steel:         #8A9199;   /* ocelová šedá — sekundární text, linky */
  --c-light:         #F4F5F6;   /* světlé sekce */
  --c-line-light:    #D3D1C7;   /* linky na světlém */
  --c-ink:           #1A1D21;   /* text na světlém pozadí */

  /* --- Akcent 1: ŽÁR (brand / akce / CTA / teplo) --- */
  --c-ember:         #FF5A1F;
  --c-ember-hover:   #E8480F;
  --c-ember-ink:     #4A1B0C;   /* tmavý text na ember ploše (kontrast) */

  /* --- Akcent 2: MĚŘENÍ (jen data / jednotky / grafy / hover) --- */
  --c-cyan:          #16B6D4;
  --c-cyan-ink:      #04342C;   /* tmavý text na cyan ploše (kontrast) */

  /* --- Typografie --- */
  --font-head: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --font-numeric: 'Inter', system-ui, -apple-system, sans-serif;

  /* --- Rádiusy --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* --- Rytmus --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --maxw:    1200px;   /* max. šířka obsahu */
}

/* ==========================================================================
   Základní typografie — Cowork na tom staví dál
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-light);
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

/* Logo je samostatný asset (FOCO) — NEpoužívat FOCO jako webfont pro text. */

/* ==========================================================================
   Čísla = hrdina. Monospace + tabulkové číslice pro zarovnání sloupců.
   Použití: <span class="num">300</span> <span class="unit">min</span>
   ========================================================================== */

.num {
  font-family: var(--font-numeric);
  font-feature-settings: 'tnum';
  font-weight: 500;
}

.unit { color: var(--c-ember); font-family: var(--font-numeric); font-feature-settings:'tnum'; }   /* jednotka u čísla */
.data { color: var(--c-cyan); font-family: var(--font-numeric); font-feature-settings:'tnum'; }    /* měřené hodnoty / metriky */

/* ==========================================================================
   Sekce — střídat tmavé a světlé
   ========================================================================== */

.section-dark  { background: var(--c-grafit); color: var(--c-light); }
.section-dark a { color: var(--c-cyan); }
.section-light { background: var(--c-light); color: var(--c-ink); }

/* ==========================================================================
   Tlačítka
   - primární = grafit (prémiové, hlavní CTA)
   - akcentní = ember (vysoký důraz, používat střídmě)
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.btn-primary { background: var(--c-grafit); color: #fff; }
.btn-primary:hover { background: #20242b; }

.btn-accent { background: var(--c-ember); color: var(--c-ember-ink); }
.btn-accent:hover { background: var(--c-ember-hover); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-line-light);
}
.btn-ghost:hover { border-color: var(--c-ink); }