/* =============================================================
   liga.lora.game — grafické tokeny (design tokens)
   Vizuální identita odvozená z loga Ligy 2026/27 a značky lora.game.
   Hlavní barva: magenta #E62286.
   ============================================================= */

:root {
  /* --- Značka: primární barva a odstíny --- */
  --color-primary:        #E62286;   /* magenta — hlavní barva značky (z loga) */
  --color-primary-dark:   #C21C70;   /* tmavší — hover, aktivní prvky */
  --color-primary-darker: #931555;   /* nejtmavší akcent, text na světlém */
  --color-primary-light:  #FBDCEC;   /* světlé pozadí, jemné zvýraznění */
  --color-primary-tint:   #FDF0F6;   /* velmi jemné pozadí ploch a pruhů */

  /* --- Neutrální --- */
  --color-ink:         #111111;      /* nadpisy a výrazný text (černá z loga) */
  --color-text:        #2A2A2A;      /* běžný text */
  --color-text-muted:  #6B6B6B;      /* sekundární text, popisky */
  --color-border:      #E3E3E3;      /* okraje, oddělovací linky */
  --color-surface:     #F6F6F7;      /* pozadí karet a ploch */
  --color-bg:          #FFFFFF;      /* hlavní pozadí stránky */

  /* --- Stavové barvy --- */
  --color-success:     #2E7D32;
  --color-success-bg:  #E7F3E8;
  --color-warning:     #B26A00;
  --color-warning-bg:  #FBEFD9;
  --color-error:       #C62828;
  --color-error-bg:    #FBE4E4;

  /* --- Typografie --- */
  /* Poppins (geometrický, ladí s logem) na nadpisy; Inter na text. */
  --font-heading: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.15rem;
  --text-xl:   1.4rem;
  --text-2xl:  1.8rem;
  --text-3xl:  2.4rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight: 1.25;
  --leading-normal: 1.6;

  /* --- Rozměry a mřížka --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --container-width: 1120px;

  /* --- Stíny --- */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 4px 12px rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 10px 28px rgba(17, 17, 17, 0.12);

  /* --- Přechody --- */
  --transition: 0.18s ease;
}

/* =============================================================
   Základní prvky — ukázkové použití tokenů.
   Plný styl UI vznikne při vývoji (moduly templates / static).
   ============================================================= */

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

a {
  color: var(--color-primary-darker);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Primární tlačítko — barva značky */
.btn-primary {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: #FFFFFF;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  transition: background var(--transition);
}
.btn-primary:hover { background: var(--color-primary-dark); }

/* Sekundární tlačítko — obrysové */
.btn-secondary {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-darker);
  background: transparent;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: calc(var(--space-3) - 2px) calc(var(--space-6) - 2px);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn-secondary:hover {
  background: var(--color-primary);
  color: #FFFFFF;
}

/* Karta / plocha */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}