/*
 * tokens.css – CSS-variabler som kompletterar theme.json.
 * theme.json definierar färger/typografi/spacing som WP genererar
 * --wp--preset--*-variabler för. Här lägger vi designspecifika tokens
 * (radius, container, transitions) som även patterns och Woo-CSS kan använda.
 */

:root {
    --tk-radius-xs: 4px;
    --tk-radius-sm: 8px;
    --tk-radius-md: 12px;
    --tk-radius-lg: 18px;
    --tk-radius-xl: 28px;
    --tk-radius-pill: 999px;

    --tk-transition-fast: 120ms ease;
    --tk-transition-base: 200ms ease;
    --tk-transition-slow: 320ms ease;

    --tk-container-tight: 640px;
    --tk-container-narrow: 780px;
    --tk-container-default: 1240px;
    --tk-container-wide: 1700px;

    --tk-line-tight: 1.1;
    --tk-line-snug: 1.25;
    --tk-line-normal: 1.55;
    --tk-line-relaxed: 1.7;

    --tk-header-height: 72px;
    --tk-header-height-mobile: 64px;
    --tk-sticky-cta-height: 76px;

    --tk-z-header: 50;
    --tk-z-mobile-nav: 90;
    --tk-z-sticky-cta: 80;
    --tk-z-minicart: 100;
    --tk-z-overlay: 100;

    --tk-focus-color: var(--wp--preset--color--info-blue, #3B5468);
    --tk-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--tk-focus-color) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --tk-transition-fast: 0ms;
        --tk-transition-base: 0ms;
        --tk-transition-slow: 0ms;
    }
}