/* SurfOS design tokens: SurfGear palette (2026 catalog cover + the prototype's beach palette).
   Every colour lives here; PHP templates never hard-code one. Text pairs are WCAG AA:
   ink/navy on sand or white >= 10:1, white on primary 5.8:1, navy on sun 8.9:1, error 7.5:1. */
:root {
    --sos-navy: #12354f;
    --sos-ink: #173042;
    --sos-ink-dim: #4b6275;
    --sos-primary: #0b6e90;
    --sos-primary-hover: #095a76;
    --sos-primary-ink: #ffffff;
    --sos-sky: #8fd3e8;
    --sos-sky-soft: #e8f5fb;
    --sos-sun: #ffd23f;
    --sos-sun-hover: #f2c521;
    --sos-sand: #fef6e4;
    --sos-surface: #ffffff;
    --sos-edge: #d6e2ea;
    --sos-ok-bg: #e3f4ea;
    --sos-ok-ink: #14532d;
    --sos-warn-bg: #fdecec;
    --sos-warn-ink: #8a1c1c;
    --sos-error: #a61b1b;
    --sos-shadow: 0 6px 20px rgba(18, 53, 79, 0.10);
    --sos-backdrop: rgba(18, 53, 79, 0.55);

    --sos-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sos-font-display: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
    --sos-radius: 12px;
    --sos-radius-sm: 8px;
    --sos-gap: 1rem;
    --sos-max: 80rem;

    /* Legacy aliases used by the P1 base styles. */
    --sos-bg: var(--sos-sand);
    --sos-brand: var(--sos-navy);
    --sos-brand-ink: #ffffff;
    --sos-focus: var(--sos-sun);
}