:root {
    /* Brand palette — tropical but professional. Swap these if the business
       supplies its own brand colours (see docs/01-architecture.md §7). */
    --color-primary-50: #e6f5ef;
    --color-primary-100: #c0e6d7;
    --color-primary-300: #4fb890;
    --color-primary-500: #0f6b4c;
    --color-primary-600: #0c5a3f;
    --color-primary-700: #094a33;

    --color-accent-400: #f4a623;
    --color-accent-500: #e08e0b;

    --color-ink-900: #16231d;
    --color-ink-700: #364a41;
    --color-ink-500: #5b6b64;
    --color-ink-300: #9bada4;
    --color-ink-100: #e7efeb;

    --color-surface: #ffffff;
    --color-surface-muted: #f6f8f7;
    --color-border: #dfe6e2;

    --color-danger: #b3261e;
    --color-danger-bg: #fbeceb;
    --color-success: #0f6b4c;
    --color-success-bg: #e8f5ee;

    --color-bg: var(--color-surface);
    --color-text: var(--color-ink-900);
    --color-text-muted: var(--color-ink-500);
    --color-link: var(--color-primary-500);

    /* Fluid type scale — clamp(min, preferred, max) so text scales smoothly
       from a 320px phone to a 4K desktop without breakpoint jumps. */
    --font-size-sm: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
    --font-size-base: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
    --font-size-lg: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
    --font-size-xl: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --font-size-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    --font-size-3xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);

    --font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

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

    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-full: 999px;

    --shadow-sm: 0 1px 3px rgba(22, 35, 29, 0.08);
    --shadow-md: 0 8px 24px rgba(22, 35, 29, 0.12);

    --container-max: 82rem;

    --touch-target-min: 44px;

    --transition-fast: 150ms ease;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #12201a;
        --color-surface: #16231d;
        --color-surface-muted: #1c2b23;
        --color-border: #2a3a32;
        --color-text: #eaf2ee;
        --color-text-muted: #a9bdb4;
        --color-link: var(--color-primary-300);
    }
}

:root[data-theme="dark"] {
    --color-bg: #12201a;
    --color-surface: #16231d;
    --color-surface-muted: #1c2b23;
    --color-border: #2a3a32;
    --color-text: #eaf2ee;
    --color-text-muted: #a9bdb4;
    --color-link: var(--color-primary-300);
}

@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;
    }
}