/**
 * Design tokens supplementary to theme.json.
 *
 * Color, typography, and spacing tokens are owned by theme.json (WordPress
 * auto-generates --wp--preset--* custom properties from it, and the block
 * editor's own UI reads from it) — see docs/DESIGN-SYSTEM.md. This file
 * only carries tokens theme.json has no concept of: radius scale, shadow
 * elevation, border widths, container widths, breakpoints, z-index scale,
 * and transition timing. Every component file under components/ reads
 * from tokens defined here or in theme.json — never a raw literal.
 */

:root {
    /* Radius */
    --ww-radius-sm: 6px;
    --ww-radius-md: 10px;
    --ww-radius-lg: 16px;
    --ww-radius-pill: 999px;

    /* Shadow — restrained, per docs/DESIGN-SYSTEM.md ("two levels max") */
    --ww-shadow-resting: 0 1px 2px rgba(20, 22, 26, 0.06), 0 1px 1px rgba(20, 22, 26, 0.04);
    --ww-shadow-raised: 0 4px 12px rgba(20, 22, 26, 0.10), 0 2px 4px rgba(20, 22, 26, 0.06);

    /* Border */
    --ww-border-width: 1px;
    --ww-border-color: var(--wp--preset--color--border, #e2e5ea);

    /* Container widths */
    --ww-container-sm: 640px;
    --ww-container-md: 768px;
    --ww-container-lg: 1024px;
    --ww-container-xl: 1200px;

    /* Breakpoints (referenced in comments; media queries can't read custom
       properties, so these are documentation, not live values — keep any
       @media rule in sync with these numbers). */
    --ww-breakpoint-sm: 375px;
    --ww-breakpoint-md: 768px;
    --ww-breakpoint-lg: 1024px;
    --ww-breakpoint-xl: 1440px;

    /* Z-index scale */
    --ww-z-dropdown: 100;
    --ww-z-sticky-nav: 200;
    --ww-z-mobile-bottom-nav: 300;
    --ww-z-modal: 400;
    --ww-z-tooltip: 500;

    /* Transitions */
    --ww-transition-fast: 120ms ease;
    --ww-transition-base: 200ms ease;

    /* Focus ring — one definition, used everywhere so keyboard focus is
       always visible and always looks the same (WCAG 2.2 AA). */
    --ww-focus-ring: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent, #1f5eff) 35%, transparent);
}

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