/**
 * Site Theme Variables — "Protocol Atelier"
 * Central design tokens used across all pages.
 * Single source of truth: colors, spacing, radii, shadows, type, motion.
 *
 * Light theme is the default; dark theme activates via
 * prefers-color-scheme. Contrast ratios are pre-verified — do not
 * drift these values without re-checking.
 */

:root {
    color-scheme: light dark;

    /* Surfaces */
    --color-bg: #f7f5ef;
    --color-surface: #fffdf8;
    --color-surface-raised: #ffffff;
    --color-surface-muted: #eee9df;

    /* Text */
    --color-text: #172026;
    --color-text-muted: #5d6872;
    --color-text-light: #7a8590;
    --color-heading: #11181d;

    /* Brand */
    --color-primary: #a84407;
    --color-primary-hover: #7c2d12;
    --color-primary-dark: #5f210d;
    --color-on-primary: #ffffff;
    --color-accent: #0f766e;
    --color-accent-hover: #115e59;

    /* Dark chrome (navbar, hero, footer) — stays dark in both schemes */
    --color-dark: #172026;
    --color-dark-secondary: #25313a;

    /* Borders */
    --color-border: #d8d2c6;
    --color-border-light: #ebe5da;

    /* Focus */
    --color-focus: #2563eb;

    /* Status */
    --color-success: #15803d;
    --color-success-bg: #dcfce7;
    --color-warning: #a84407;
    --color-warning-bg: #ffedd5;
    --color-danger: #b91c1c;
    --color-danger-bg: #fee2e2;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(23, 32, 38, 0.06), 0 1px 3px rgba(23, 32, 38, 0.08);
    --shadow-md: 0 4px 12px rgba(23, 32, 38, 0.10), 0 2px 4px rgba(23, 32, 38, 0.06);
    --shadow-lg: 0 12px 32px rgba(23, 32, 38, 0.14), 0 4px 8px rgba(23, 32, 38, 0.08);

    /* Radii */
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --radius-pill: 999px;

    /* Spacing scale */
    --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;
    --space-8: 4.5rem;
    --space-9: 6rem;

    /* Typography — system stacks only, no hosted fonts */
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-brand: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* Motion */
    --transition-color: 150ms ease-out;
    --transition-move: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Legacy aliases (consumed by chat-widget.css, wiki, tools) */
    --color-white: #ffffff;
    --color-light: var(--color-surface-muted);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Surfaces */
        --color-bg: #101417;
        --color-surface: #151b20;
        --color-surface-raised: #1b242b;
        --color-surface-muted: #202b33;

        /* Text */
        --color-text: #e7edf2;
        --color-text-muted: #aab6c0;
        --color-text-light: #83919c;
        --color-heading: #f8fafc;

        /* Brand */
        --color-primary: #f59e0b;
        --color-primary-hover: #fbbf24;
        --color-primary-dark: #b45309;
        --color-on-primary: #1a1207;
        --color-accent: #2dd4bf;
        --color-accent-hover: #5eead4;

        /* Borders */
        --color-border: #33414c;
        --color-border-light: #26323b;

        /* Focus */
        --color-focus: #60a5fa;

        /* Status */
        --color-success: #86efac;
        --color-success-bg: #143321;
        --color-warning: #fbbf24;
        --color-warning-bg: #3a2711;
        --color-danger: #fca5a5;
        --color-danger-bg: #3b1717;

        /* Shadows — darker in dark mode */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.35);
    }
}