/* ==========================================================================
   01-tokens.css — Design Tokens & CSS Custom Properties
   seoprakticky.cz
   ==========================================================================
   Zde jsou definovány všechny sdílené hodnoty projektu.
   Měňte hodnoty ZDE — změna se projeví v celém projektu automaticky.
   ========================================================================== */

:root {
  /* ── Barvy ────────────────────────────────────────────────────────────── */
  --color-accent:          #edde00;   /* žlutá – primární akcentní barva */
  --color-accent-hover:    #e0d000;   /* o stupeň tmavší pro hover */
  --color-accent-soft:     rgba(237, 222, 0, 0.16);  /* průhledná verze */
  --color-accent-mid:      rgba(237, 222, 0, 0.45);
  --color-accent-strong:   rgba(237, 222, 0, 0.65);

  --color-text:            #111111;
  --color-text-muted:      #333333;
  --color-text-subtle:     rgba(17, 17, 17, 0.68);
  --color-text-faint:      rgba(17, 17, 17, 0.60);

  --color-bg:              #ffffff;
  --color-bg-soft:         #F8F9FA;   /* světle šedé pozadí bloků */
  --color-bg-alt:          #F1F3F5;   /* hover stav */

  --color-border:          #E5E7EB;   /* hlavní border */
  --color-border-soft:     rgba(0, 0, 0, 0.06);
  --color-border-medium:   rgba(0, 0, 0, 0.08);

  /* Sémantické barvy */
  --color-positive:        #15803d;   /* zelená – ✓ */
  --color-negative:        #b91c1c;   /* červená – ✗ */
  --color-alert-bg:        #fff4f4;   /* červený alert box */

  /* Tmavé varianty (tmavé stats bloky) */
  --color-dark-bg:         #262B30;
  --color-dark-card:       #323840;
  --color-dark-card-hover: #3A424C;
  --color-dark-border:     rgba(255, 255, 255, 0.10);
  --color-dark-text:       rgba(255, 255, 255, 0.92);
  --color-dark-muted:      rgba(255, 255, 255, 0.78);

  /* ── Typografie ───────────────────────────────────────────────────────── */
  --font-body:    "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: Poppins, sans-serif;
  --font-code:    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   32px;
  --text-2xl:  40px;
  --text-3xl:  45px;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.6;
  --leading-loose:   1.75;

  /* ── Prostory ─────────────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;

  /* ── Poloměry rohů ────────────────────────────────────────────────────── */
  --radius-none:   0px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     14px;
  --radius-full:   999px;

  /* ── Stíny ────────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 18px rgba(0, 0, 0, 0.06);
  --shadow-lg:    0 10px 28px rgba(15, 23, 42, 0.06);
  --shadow-btn:   0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-btn-hover: 0 4px 10px rgba(0, 0, 0, 0.10);
  --shadow-badge: 0 6px 18px rgba(0, 0, 0, 0.12);

  /* ── Přechody ─────────────────────────────────────────────────────────── */
  --transition-fast:   0.12s ease;
  --transition-base:   0.15s ease;
  --transition-normal: 0.18s ease;
  --transition-slow:   0.25s ease;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --max-width-content: 1000px;
  --max-width-wide:    1200px;
  --max-width-text:    860px;
}