/* ============================================================
   tokens.css — Design tokens pro Litera v2
   Kompletní design systém jako CSS proměnné
   ============================================================ */

:root {
  /* === Primární modré === */
  --blue-900: #1e3a5f;
  --blue-700: #2d5891;
  --blue-600: #4a6fa5;      /* hlavní akční modrá */
  --blue-500: #6a85b6;      /* oblíbená světlá modrá z v1 */
  --blue-400: #8ba5cc;
  --blue-200: #c5d5eb;
  --blue-100: #e8f0fb;
  --blue-50:  #f0f5fc;      /* surface background */

  /* === Neutrály === */
  --gray-900: #1a1f2e;
  --gray-700: #3d4566;
  --gray-500: #7b7f9e;
  --gray-300: #c5c7d8;
  --gray-100: #f0f2f7;
  --white:    #ffffff;

  /* === Sémantické === */
  --success: #27ae60;
  --success-light: #eafaf1;
  --error:   #e74c3c;
  --error-light: #fdedec;
  --gold:    #f1c40f;

  /* === Aliasy === */
  --color-primary:    var(--blue-600);
  --color-primary-lt: var(--blue-500);
  --color-surface:    var(--blue-50);
  --color-card:       var(--white);
  --color-text:       var(--gray-900);
  --color-muted:      var(--gray-500);
  --color-border:     var(--blue-100);

  /* === Stíny (blue-tinted = koherentní) === */
  --shadow-sm: 0 2px 8px rgba(74, 111, 165, 0.08);
  --shadow-md: 0 4px 16px rgba(74, 111, 165, 0.12);
  --shadow-lg: 0 8px 32px rgba(74, 111, 165, 0.18);

  /* === Spacing (4px grid) === */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* === Typography === */
  --font: 'Poppins', sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;

  /* === Border radius === */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 999px;

  /* === Layout === */
  --topnav-h:    64px;
  --bottomnav-h: 60px;
  --max-width:  1100px;
}

/* ── Icon tile containers ── */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 1.65rem;
  color: white;
  flex-shrink: 0;
  line-height: 1;
}
.icon-tile-navy  { background: linear-gradient(135deg, #1e3a5f, #2d5891); }
.icon-tile-blue  { background: linear-gradient(135deg, #2d5891, #4a6fa5); }
.icon-tile-sky   { background: linear-gradient(135deg, #3473b8, #5c92d6); }
.icon-tile-indigo{ background: linear-gradient(135deg, #1a305a, #2d5891); }
.icon-tile-teal  { background: linear-gradient(135deg, #264e88, #4a6fa5); }
.icon-tile-violet{ background: linear-gradient(135deg, #2d5891, #6a85b6); }
.icon-tile-muted   { background: linear-gradient(135deg, #94a3b8, #cbd5e1); }
.icon-tile-orange  { background: linear-gradient(135deg, #c2410c, #ea580c); }
.icon-tile-amber   { background: linear-gradient(135deg, #b45309, #d97706); }

/* ── Inline icon colors ── */
.icon-primary { color: var(--blue-700); }
.icon-accent  { color: var(--blue-500); }
.icon-muted   { color: var(--blue-400); }
.icon-success { color: var(--success); }

/* Heading icons automatically blue */
h1 > i[class*="ph-"], h2 > i[class*="ph-"] { color: var(--blue-600); }