/*
 * Lahoda.sk shared design tokens — see ../../../DESIGN_MANUAL.md for the source of truth.
 * Loaded (deduplicated by Renderer::appendStyles) as the first stylesheet on every
 * individual component so every component.php can rely on these custom properties.
 */

:root {
    /* Gold family */
    --brand-gold: #a67745;
    --brand-gold-dark: #8a6138;
    --brand-gold-light: #d4b792;
    --brand-gold-tint: #f3e9da;

    /* Red family */
    --brand-red: #ed1b35;
    --brand-red-dark: #c21229;
    --brand-red-light: #f58a96;
    --brand-red-tint: #fbe4e7;

    /* Neutrals */
    --ink: #2a211a;
    --ink-muted: #6b5d4f;
    --bg-cream: #fbf6ec;
    --bg-cream-deep: #f1e4d0;
    --border: #e3d2b8;
    --ink-surface: #241b14;

    /* Semantic */
    --success: #4b7a4f;
    --success-tint: #e7efe3;
    --warning: #c98a2e;
    --danger: #b0102a;
    --danger-tint: #f7e0e2;

    /* Typography */
    --font-display: "Madimi One", Georgia, "Playfair Display", serif;
    --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Layout */
    --content-max-width: 1280px;
    --radius: 16px;
    --radius-sm: 8px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Container gutter (responsive via clamp — narrows on phones, widens on desktop) */
    --container-gutter: clamp(16px, 4vw, 48px);

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(42, 33, 26, 0.06), 0 1px 3px rgba(42, 33, 26, 0.08);
    --shadow-md: 0 4px 12px rgba(42, 33, 26, 0.08), 0 2px 4px rgba(42, 33, 26, 0.06);
    --shadow-lg: 0 12px 32px rgba(42, 33, 26, 0.14), 0 4px 8px rgba(42, 33, 26, 0.06);

    /* Motion */
    --transition-fast: 150ms ease;
    --transition-base: 220ms ease;
    --transition-slow: 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Breakpoint reference for all component stylesheets (plain CSS has no custom
 * media queries, so these values must be hand-copied into each @media rule):
 *   phone   — default, no query (mobile-first base)
 *   tablet  — @media (min-width: 768px)
 *   desktop — @media (min-width: 1080px)
 *
 * Changed from 1024px to 1080px on 2026-08-08 — 1049px-wide viewports must
 * count as tablet, not desktop. Components built before this date may still
 * use the old 1024px/1023.98px values; update them to 1080px/1079.98px next
 * time you're doing a pass on that component (see navigation-lahoda-1 and
 * banner-lahoda-1 for already-migrated examples).
 */