/* ==========================================================================
   Eurodrevostavby — Design Tokens
   Generováno z Figma variables (file hjd48UYlKs03GFXtGLSXf7, page "Design")
   Stav: 5 collections, 44 variables. 1:1 mapování na CSS custom properties.
   ========================================================================== */

:root {
  /* --- Colors (collection: Variable collection) ------------------------- */
  --color-green:         #0daf4d; /* primární brand / CTA */
  --color-white:         #ffffff;
  --color-heading:       #1d1e19; /* nadpisy */
  --color-text:          #434638; /* body text */
  --color-background:    #f9f9f9; /* page / section bg */
  --color-accent-orange: #ffbe75;
  --color-accent-light:  #e4f99c;
  --color-border:        #dfdfdf;

  /* --- Spacing (4/8pt grid, collection: Spacing) ------------------------ */
  /* Pojmenování = space-N kde N je hodnota/4 (space-25 = 100px). */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22: 88px;
  --space-24: 96px;
  --space-25: 100px;
  --space-26: 104px;
  --space-28: 112px;
  --space-30: 120px;

  /* --- Font sizes (collection: Typography) ------------------------------ */
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  48px;
  --text-5xl:  54px;
  --text-6xl:  64px;

  /* --- Radius (collection: Radius) -------------------------------------- */
  --radius-sm:   4px;
  --radius-lg:   32px;
  --radius-full: 50px;   /* pozn.: 50px, ne 9999 — pill buttony do ~100px výšky */

  /* --- Stroke (collection: Stroke Weight) ------------------------------- */
  --stroke-1: 1px;
  --stroke-2: 2px;

  /* --- Fonts ------------------------------------------------------------ */
  --font-sans:    "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Manrope", "Inter", sans-serif; /* jen Caption/Manrope styl */
}

/* ==========================================================================
   Typography — 12 text styles z Figmy → utility třídy
   Hodnoty 1:1 (font / size / line-height / letter-spacing).
   line-height uvádím v % i v px (px = % × size, zaokrouhleno).
   ========================================================================== */

.h1 { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-6xl); line-height: 110%; letter-spacing: -2px; color: var(--color-heading); }   /* 64 / 70px */
.h2 { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-5xl); line-height: 110%; letter-spacing: -2px; color: var(--color-heading); }   /* 54 / 59px */
.h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-4xl); line-height: 110%; letter-spacing: -2px; color: var(--color-heading); }   /* 48 / 53px */
.h4 { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-3xl); line-height: 110%; letter-spacing: -1px; color: var(--color-heading); }   /* 40 / 44px */
.h5 { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-2xl); line-height: 140%; letter-spacing: -1px; color: var(--color-heading); }   /* 32 / 45px */
.h6 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xl);  line-height: 120%; letter-spacing: -0.5px; color: var(--color-heading); } /* 24 / 29px */

.body-lg     { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-lg);   line-height: 160%; color: var(--color-text); } /* 18 / 29px */
.body-base   { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: 140%; color: var(--color-text); } /* 16 / 22px */
.body-medium { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-base); line-height: 170%; color: var(--color-text); } /* 16 / 27px */
.body-bold   { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-base); line-height: 170%; color: var(--color-text); } /* 16 / 27px */
.body-sm     { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-sm);   line-height: 170%; color: var(--color-text); } /* 14 / 24px */

.caption     { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); line-height: 170%; } /* Manrope SemiBold 16 / 27px */

/* ==========================================================================
   Pozn. pro implementaci:
   - Inter váhy: Medium=500, Semi Bold=600, Bold=700, Regular=400.
   - Manrope se používá JEN ve stylu Caption/Manrope (SemiBold 600).
   - Načti oba fonty (Inter 400/500/600/700 + Manrope 600) přes @font-face
     nebo Google Fonts; jinak fallback rozhodí letter-spacing a metriku.
   ========================================================================== */