/* ============================================================
   variables.css — Design tokeny poradit.cz
   Session 6 | 2026-04-18
   ============================================================ */

:root {
  /* === Primární paleta (navy — důvěra, autoritativnost) === */
  --color-primary:       #0b5394;
  --color-primary-dark:  #083d6e;
  --color-primary-light: #e3eff9;

  /* === Accent (oranžová — CTA, pozornost) === */
  --color-accent:      #f2a516;
  --color-accent-dark: #cc8c0d;

  /* === Status === */
  --color-success: #1a6b3a;
  --color-warning: #d4a017;
  --color-error:   #c0392b;

  /* === Neutrály === */
  --color-bg:         #ffffff;
  --color-bg-alt:     #f7f9fc;
  --color-border:     #d6dee8;
  --color-text:       #1a202c;
  --color-text-muted: #556070;

  /* === Plošné varianty (karty, panely, chipy) === */
  --color-bg-card:    #ffffff;
  --color-bg-subtle:  #f9fafb;
  --color-bg-muted:   #f8fafb;
  --color-bg-chip:    #eef2ff;

  /* === Typografie === */
  --font-serif: 'Merriweather', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* === Spacing (rem škála) === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;

  /* === Radius === */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  /* === Shadow === */
  --shadow:    0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);

  /* === Layout === */
  --max-width:     1200px;
  --content-width: 780px;
  --wide-width:    1100px;

  /* === Transitions === */
  --transition: 0.2s ease;

  /* === Z-index scale === */
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
}

/* === Dark mode === */
[data-theme="dark"] {
  --color-bg:         #0f1419;
  --color-bg-alt:     #1a202c;
  --color-border:     #2d3648;
  --color-text:       #e2e8f0;
  --color-text-muted: #a0aec0;

  /* Plošné varianty — tmavé povrchy */
  --color-bg-card:    #1a202c;
  --color-bg-subtle:  #1a202c;
  --color-bg-muted:   #1a202c;
  --color-bg-chip:    #1e2a3a;

  /* Primární — světlejší pro kontrast na tmavém pozadí */
  --color-primary:       #4a9eff;
  --color-primary-dark:  #2b7de9;
  --color-primary-light: #1e2a3a;

  /* Accent zachovat, jen mírně upravit */
  --color-accent:      #f2a516;
  --color-accent-dark: #e09410;

  /* Status — světlejší pro tmavé pozadí */
  --color-success: #2ecc71;
  --color-warning: #f1c40f;
  --color-error:   #e74c3c;

  /* Shadows v dark jsou výraznější */
  --shadow:    0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
}