/* 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-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: #0b1020;
    --color-surface: #111829;
    --color-surface-elevated: #161f34;
    --color-surface-muted: #1b2540;
    --color-border: #232d48;
    --color-border-strong: #2c385a;

    --color-text: #e7ecf5;
    --color-text-muted: #98a2b3;
    --color-text-subtle: #6b7488;

    --color-accent: #818cf8;
    --color-accent-hover: #a5b4fc;
    --color-accent-foreground: #0b1020;
    --color-accent-soft: rgba(129, 140, 248, 0.12);
    --color-accent-ring: rgba(129, 140, 248, 0.35);

    --color-success: #34d399;
    --color-success-soft: rgba(52, 211, 153, 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: #0f1527;
    --color-field-border: #26304a;

    --hero-glow: radial-gradient(1200px 500px at 50% -200px, rgba(129, 140, 248, 0.25), transparent 60%);
}

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

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

    --color-bg: #fafafa;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-muted: #f4f4f5;
    --color-border: #e4e4e7;
    --color-border-strong: #d4d4d8;

    --color-text: #18181b;
    --color-text-muted: #52525b;
    --color-text-subtle: #71717a;

    --color-accent: #4f46e5;
    --color-accent-hover: #4338ca;
    --color-accent-foreground: #ffffff;
    --color-accent-soft: rgba(79, 70, 229, 0.08);
    --color-accent-ring: rgba(79, 70, 229, 0.35);

    --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: #d4d4d8;

    --hero-glow: radial-gradient(1200px 500px at 50% -200px, rgba(79, 70, 229, 0.12), transparent 60%);
}

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

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

    --color-bg: #fafafa;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-muted: #f4f4f5;
    --color-border: #e4e4e7;
    --color-border-strong: #d4d4d8;
    --color-text: #18181b;
    --color-text-muted: #52525b;
    --color-text-subtle: #71717a;
    --color-accent: #4f46e5;
    --color-accent-hover: #4338ca;
    --color-accent-foreground: #ffffff;
    --color-accent-soft: rgba(79, 70, 229, 0.08);
    --color-accent-ring: rgba(79, 70, 229, 0.35);
    --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: #d4d4d8;
    --hero-glow: radial-gradient(1200px 500px at 50% -200px, rgba(79, 70, 229, 0.12), transparent 60%);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --color-bg: #0b1020;
        --color-surface: #111829;
        --color-surface-elevated: #161f34;
        --color-surface-muted: #1b2540;
        --color-border: #232d48;
        --color-border-strong: #2c385a;
        --color-text: #e7ecf5;
        --color-text-muted: #98a2b3;
        --color-text-subtle: #6b7488;
        --color-accent: #818cf8;
        --color-accent-hover: #a5b4fc;
        --color-accent-foreground: #0b1020;
        --color-accent-soft: rgba(129, 140, 248, 0.12);
        --color-accent-ring: rgba(129, 140, 248, 0.35);
        --color-success: #34d399;
        --color-success-soft: rgba(52, 211, 153, 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: #0f1527;
        --color-field-border: #26304a;
        --hero-glow: radial-gradient(1200px 500px at 50% -200px, rgba(129, 140, 248, 0.25), transparent 60%);
    }
}

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

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