/* Design tokens — single source of truth for colors, spacing, typography, motion.
 *
 * Themes:
 *   html[data-theme="dark"]  — default (slate/indigo palette)
 *   html[data-theme="light"] — paired light palette
 *   html[data-theme="auto"]  — resolves via prefers-color-scheme
 */

:root {
    /* Spacing scale (4px base) */
    --sp-0: 0;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 56px;
    --sp-10: 72px;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* Typography */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    --font-display: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", "Roboto Mono", Consolas, monospace;
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 44px;
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;
    --tracking-tight: -0.01em;
    --tracking-wide: 0.05em;

    /* Motion */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 120ms;
    --duration-base: 180ms;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.28);

    /* Layering */
    --z-header: 10;
    --z-sidebar: 20;
    --z-drawer: 50;
    --z-toast: 100;
}

/* --------------------------------------------------------------------------
 * Dark theme (default)
 * -------------------------------------------------------------------------- */

html[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #08110d;
    --color-surface: #0e1814;
    --color-surface-elevated: #13201a;
    --color-surface-muted: #182620;
    --color-border: #1f2f27;
    --color-border-strong: #2b3f34;

    --color-text: #e9f1ec;
    --color-text-muted: #9fb2a8;
    --color-text-subtle: #6d8177;

    --color-accent: #34d399;
    --color-accent-hover: #6ee7b7;
    --color-accent-foreground: #04231a;
    --color-accent-soft: rgba(52, 211, 153, 0.13);
    --color-accent-ring: rgba(52, 211, 153, 0.4);

    /* Second categorical series in the clicks-vs-scans chart. A hue far from
       the emerald accent (CVD-separation validated) so the two lines never
       blend — do not fold this back into --color-success (adjacent green). */
    --color-chart-secondary: #a78bfa;

    --color-success: #4ade80;
    --color-success-soft: rgba(74, 222, 128, 0.15);
    --color-danger: #f87171;
    --color-danger-soft: rgba(248, 113, 113, 0.16);
    --color-warning: #fbbf24;
    --color-warning-soft: rgba(251, 191, 36, 0.16);

    --color-field: #0a140f;
    --color-field-border: #24352c;

    --hero-glow: none;
}

/* --------------------------------------------------------------------------
 * Light theme
 * -------------------------------------------------------------------------- */

html[data-theme="light"] {
    color-scheme: light;

    --color-bg: #f4f8f5;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-muted: #ecf3ee;
    --color-border: #dde8e1;
    --color-border-strong: #c7d6cd;

    --color-text: #0f1a14;
    --color-text-muted: #4a5850;
    --color-text-subtle: #6d8177;

    --color-accent: #047857;
    --color-accent-hover: #065f46;
    --color-accent-foreground: #ffffff;
    --color-accent-soft: rgba(4, 120, 87, 0.09);
    --color-accent-ring: rgba(4, 120, 87, 0.34);

    --color-chart-secondary: #7c3aed;

    --color-success: #059669;
    --color-success-soft: rgba(5, 150, 105, 0.1);
    --color-danger: #dc2626;
    --color-danger-soft: rgba(220, 38, 38, 0.1);
    --color-warning: #d97706;
    --color-warning-soft: rgba(217, 119, 6, 0.12);

    --color-field: #ffffff;
    --color-field-border: #c7d6cd;

    --hero-glow: none;
}

/* --------------------------------------------------------------------------
 * Auto theme — follow OS preference
 * -------------------------------------------------------------------------- */

html[data-theme="auto"] {
    color-scheme: light dark;

    --color-bg: #f4f8f5;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-muted: #ecf3ee;
    --color-border: #dde8e1;
    --color-border-strong: #c7d6cd;
    --color-text: #0f1a14;
    --color-text-muted: #4a5850;
    --color-text-subtle: #6d8177;
    --color-accent: #047857;
    --color-accent-hover: #065f46;
    --color-accent-foreground: #ffffff;
    --color-accent-soft: rgba(4, 120, 87, 0.09);
    --color-accent-ring: rgba(4, 120, 87, 0.34);
    --color-chart-secondary: #7c3aed;
    --color-success: #059669;
    --color-success-soft: rgba(5, 150, 105, 0.1);
    --color-danger: #dc2626;
    --color-danger-soft: rgba(220, 38, 38, 0.1);
    --color-warning: #d97706;
    --color-warning-soft: rgba(217, 119, 6, 0.12);
    --color-field: #ffffff;
    --color-field-border: #c7d6cd;
    --hero-glow: none;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --color-bg: #08110d;
        --color-surface: #0e1814;
        --color-surface-elevated: #13201a;
        --color-surface-muted: #182620;
        --color-border: #1f2f27;
        --color-border-strong: #2b3f34;
        --color-text: #e9f1ec;
        --color-text-muted: #9fb2a8;
        --color-text-subtle: #6d8177;
        --color-accent: #34d399;
        --color-accent-hover: #6ee7b7;
        --color-accent-foreground: #04231a;
        --color-accent-soft: rgba(52, 211, 153, 0.13);
        --color-accent-ring: rgba(52, 211, 153, 0.4);
        --color-chart-secondary: #a78bfa;
        --color-success: #4ade80;
        --color-success-soft: rgba(74, 222, 128, 0.15);
        --color-danger: #f87171;
        --color-danger-soft: rgba(248, 113, 113, 0.16);
        --color-warning: #fbbf24;
        --color-warning-soft: rgba(251, 191, 36, 0.16);
        --color-field: #0a140f;
        --color-field-border: #24352c;
        --hero-glow: none;
    }
}

/* --------------------------------------------------------------------------
 * Motion preferences
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}