:root {
  /* Base font size pro výpočet rem hodnot (16px = 1rem) */
  
  /* Typografická škála - Desktop */
  --font-size-xs: 0.75rem;      /* 12px - drobný text, poznámky */
  --font-size-sm: 0.875rem;     /* 14px - malý text, popisky */
  --font-size-base: 1rem;       /* 16px - základní text */
  --font-size-md: 1.125rem;     /* 18px - zvýrazněný text */
  --font-size-lg: 1.25rem;      /* 20px - podnadpisy */
  --font-size-xl: 1.5rem;       /* 24px - menší nadpisy */
  --font-size-2xl: 1.875rem;    /* 30px - střední nadpisy */
  --font-size-3xl: 2.25rem;     /* 36px - velké nadpisy */
  --font-size-4xl: 3rem;        /* 48px - hlavní nadpisy */
  --font-size-5xl: 3.75rem;     /* 60px - hero nadpisy */
  
  /* Line heights - výšky řádků pro jednotlivé velikosti */
  --line-height-tight: 1.2;     /* Pro nadpisy */
  --line-height-snug: 1.375;    /* Pro podnadpisy */
  --line-height-normal: 1.5;    /* Pro běžný text */
  --line-height-relaxed: 1.625; /* Pro delší odstavce */
  --line-height-loose: 2;       /* Pro velmi vzdušný text */
  
  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Letter spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
}

/* Responzivní úpravy pro mobily */
@media (max-width: 768px) {
  :root {
    --font-size-xs: 0.75rem;      /* 12px - zůstává stejné */
    --font-size-sm: 0.813rem;     /* 13px - lehce menší */
    --font-size-base: 0.938rem;   /* 15px - lehce menší */
    --font-size-md: 1.063rem;     /* 17px */
    --font-size-lg: 1.188rem;     /* 19px */
    --font-size-xl: 1.375rem;     /* 22px */
    --font-size-2xl: 1.625rem;    /* 26px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 2.75rem;     /* 44px */
  }
}

/* Utility třídy pro snadné použití */
.text-xs {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.text-sm {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.text-base {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.text-md {
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

.text-lg {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
}

.text-xl {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
}

.text-2xl {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.text-3xl {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.text-4xl {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
}

.text-5xl {
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
}

/* Utility třídy pro font weight */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

/* Utility třídy pro letter spacing */
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }

/* Utility třídy pro line height */
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* Předpřipravené kombinace pro běžné použití */
.heading-hero {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.heading-1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.heading-2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.heading-3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.heading-4 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.heading-5 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}

.body-large {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.body-normal {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.body-small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.caption {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: #666;
}