/*
 * Design Tokens (PHASE 2.3)
 * Acuan visual: mockup-ngeregis-flow.html
 * Palette: warm beige + navy/red + ok/warn/danger
 * Color space: OKLCH (Safari 15.4+, Chrome 111+, Firefox 113+)
 */

:root {
    /* Surface & background */
    --bg: oklch(96.7% 0.017 76);
    --surface: oklch(99.2% 0.006 76);
    --surface-soft: oklch(97.4% 0.011 74);
    --surface-strong: oklch(94.3% 0.018 74);

    /* Text */
    --fg: oklch(23% 0.02 60);
    --muted: oklch(50% 0.017 58);
    --subtle: oklch(67% 0.012 58);

    /* Border */
    --border: oklch(89% 0.014 72);
    --border-strong: oklch(82% 0.019 72);

    /* Brand accents */
    --navy: oklch(33% 0.075 250);
    --navy-soft: oklch(93% 0.022 250);
    --red: oklch(59% 0.19 27);
    --red-soft: oklch(94% 0.03 28);

    /* Status colors */
    --ok: oklch(63% 0.14 154);
    --ok-soft: oklch(93% 0.035 155);
    --warn: oklch(74% 0.13 79);
    --warn-soft: oklch(95% 0.03 80);
    --danger: oklch(58% 0.2 28);
    --danger-soft: oklch(93% 0.04 25);

    /* Shadows */
    --shadow-sm: 0 2px 6px color-mix(in oklab, var(--fg) 6%, transparent);
    --shadow: 0 18px 42px color-mix(in oklab, var(--fg) 10%, transparent);
    --shadow-lg: 0 34px 84px color-mix(in oklab, var(--fg) 14%, transparent);

    /* Radius */
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;

    /* Typography */
    --font-display: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-body: "Aptos", "Segoe UI", "SF Pro Text", system-ui, sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", Consolas, monospace;
}

/* Respect user's motion preference — kept here so all pages inherit */
@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;
    }
}