/**
 * MASÉR 2.0 — DESIGN TOKENS
 *
 * Toto je JEDINÝ zdroj vizuálních pravidel platformy (Fáze 0, rozhodnutí #3).
 * Žádná komponenta (primitivní ani business) nesmí definovat vlastní barvu,
 * spacing, typografii, radius, shadow ani z-index mimo tyto proměnné
 * (Fáze 0, rozhodnutí #4).
 *
 * Tento soubor je technologicky nezávislý — stejný soubor lze načíst do
 * WordPress šablony, do Elementor Custom CSS i do React aplikací (kartotéka,
 * kalkulačka), viz Fáze 0, sekce C ("Rozsah komponentové knihovny").
 *
 * Hodnoty níže jsou výchozí odhad (viz Fáze 0, Příloha) — laditelné bez
 * dopadu na architekturu.
 */

:root {

  /* ==========================================================
     BARVY
     ========================================================== */
  --color-primary-50:  #e8f2f1;
  --color-primary-100: #c7e1de;
  --color-primary-300: #5fa39d;
  --color-primary-500: #0f6d66; /* teal — hlavní brand barva */
  --color-primary-700: #0a4d48;
  --color-primary-900: #052926;

  --color-accent-300:  #e0c568;
  --color-accent-500:  #c9a227; /* gold — akcentová barva */
  --color-accent-700:  #967a1d;

  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f7f8f8;
  --color-neutral-100: #eceeee;
  --color-neutral-200: #d9dcdc;
  --color-neutral-300: #b9bfbf;
  --color-neutral-400: #8f9797;
  --color-neutral-500: #6b7373;
  --color-neutral-600: #4f5656;
  --color-neutral-700: #383e3e;
  --color-neutral-800: #242828;
  --color-neutral-900: #141717;

  --color-success:     #2e7d32;
  --color-success-bg:  #e8f5e9;
  --color-error:       #c62828;
  --color-error-bg:    #fdecea;
  --color-warning:     #b8860b;
  --color-warning-bg:  #fdf3d9;

  /* Sémantické aliasy — komponenty čtou tyto, ne přímo barevnou škálu */
  --color-text:            var(--color-neutral-800);
  --color-text-muted:      var(--color-neutral-500);
  --color-text-inverse:    var(--color-neutral-0);
  --color-surface:         var(--color-neutral-0);
  --color-surface-muted:   var(--color-neutral-50);
  --color-border:          var(--color-neutral-200);
  --color-action:          var(--color-primary-500);
  --color-action-hover:    var(--color-primary-700);
  --color-action-disabled: var(--color-neutral-300);

  /* ==========================================================
     TYPOGRAFIE
     ========================================================== */
  --font-heading: 'Manrope Variable', 'Segoe UI', sans-serif;
  --font-body:    'Manrope Variable', 'Segoe UI', sans-serif;
  --font-serif:   'Source Serif 4', Georgia, serif; /* jen pro dlouhé články v Knihovně, ne pro zbytek rozhraní */

  --text-h1:       clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-h2:       clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  --text-h3:       clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-h4:       1.25rem;
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-small:    0.875rem;
  --text-caption:  0.75rem;

  --line-height-heading: 1.2;
  --line-height-body:    1.6;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-bold:     700;

  /* ==========================================================
     SPACING (4px báze)
     ========================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ==========================================================
     RADIUS
     ========================================================== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 999px;

  /* ==========================================================
     SHADOW
     ========================================================== */
  --shadow-sm: 0 1px 2px rgba(20, 23, 23, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 23, 23, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 23, 23, 0.12);

  /* ==========================================================
     CONTAINER
     ========================================================== */
  --container-max:   1200px;
  --container-pad:   16px;

  /* ==========================================================
     MOTION
     ========================================================== */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-ease: ease-out;

  /* ==========================================================
     Z-INDEX
     ========================================================== */
  --z-dropdown:      100;
  --z-sticky-header: 200;
  --z-offcanvas:     300;
  --z-modal:         400;
  --z-toast:         500;
}

/* ==========================================================
   BREAKPOINTY (referenční, používat přímo v media queries)
   mobile:  < 768px
   tablet:  768px – 1199px
   desktop: >= 1200px
   ========================================================== */