/*
 * Design tokens for the storefront (the values of style.css :root, named by
 * role). New components read these; old ones keep their own values.
 */
:root {
    --c-brand: #0056b3;
    --c-brand-strong: #004494;
    --c-brand-soft: #e8f4fd;
    --c-accent: #f97316;
    --c-success: #15803d;
    --c-danger: #b91c1c;
    --c-text: #212529;
    --c-text-2: #495057;
    --c-text-muted: #5f6b76;   /* 4.9:1 on white (style.css #6c757d is 4.7:1) */
    --c-bg: #ffffff;
    --c-bg-alt: #f8fafc;
    --c-border: #dee2e6;
    --c-focus: #1d4ed8;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --wrap: 1280px;
    --gutter: clamp(1rem, 3vw, 2rem);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Skip link: first focusable element on every page (include/header*.php) ── */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 100000;
    padding: var(--space-3) var(--space-4);
    background: var(--c-brand);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible { top: var(--space-3); color: #fff; }
main:focus { outline: none; }

/* ── Keyboard focus: visible on every control, whatever the component CSS removed ── */
:focus-visible {
    outline: 3px solid var(--c-focus) !important;
    outline-offset: 2px;
}
[data-theme="dark"] :focus-visible { outline-color: #93c5fd !important; }

/* ── Reduced motion: no animation, transitions or smooth scrolling ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto !important; }
}