/*
 * Design tokeny - jediný zdroj pravdy pro barvy, typografii, rozestupy.
 * Breakpointy (640 / 768 / 992 / 1200px) nejdou vyjádřit přes custom properties
 * uvnitř @media dotazů bez build kroku - používají se jako literální hodnoty
 * napříč layout.css a components.css.
 */

:root {
    /* Barvy */
    --color-primary: #6aaf08;
    --color-primary-dark: #5c9806;
    --color-primary-tint: #eaf5d9;
    --color-ink: #272727;
    --color-ink-muted: #6b6b6b;
    --color-surface: #ffffff;
    --color-surface-alt: #f7f7f7;
    --color-surface-muted: #f0f0f0;
    --color-border: #e2e2e2;
    --color-border-dashed: #d8d8d8;
    --color-footer-bg: #1e1e1e;
    --color-footer-border: #303030;
    --color-danger: #d63031;
    --color-accent-sugar: #b6651c;

    /* Typografie */
    --font-heading: 'Lora', Georgia, serif;
    --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

    --fs-sm: 0.9375rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
    --fs-2xl: clamp(2.25rem, 1.6rem + 2.5vw, 3.25rem);

    --lh-tight: 1.2;
    --lh-base: 1.6;

    /* Rozestupy (násobky 4px) */
    --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-20: 80px;

    /* Zaoblení a stíny */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --radius-round: 50%;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .12);

    --transition-base: 200ms ease;
    --container-max: 1200px;
}