/*
 * StageOS Design Tokens (Phase 2 Design Spec sec 3)
 *
 * Loaded BEFORE site.css and stageos.css so all downstream styles can
 * consume CSS custom properties.
 *
 * Phase 2 sign-off override (2026-05-10, Steve Harris): dark only for v1.0.
 * No `@media (prefers-color-scheme)` branch. Light-mode tokens stay defined
 * (under [data-theme="light"]) so v1.1 can ship an explicit toggle as a
 * pure CSS swap without re-architecting this file.
 */

/* ============================================================
 * 3.1 Colour - dark (default)
 * ============================================================ */
:root {
    --color-bg: #0a0a0a;
    --color-surface: #141414;
    --color-surface-2: #1d1d20;
    --color-border: #2b2b30;
    --color-text: #fafafa;
    --color-text-muted: #a1a1aa;
    --color-text-disabled: #52525b;
    --color-primary: #39ff14;
    --color-primary-contrast: #000000;
    --color-primary-muted: #2bc20f;
    --color-secondary: #ff6b35;
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #3b82f6;
    --color-focus-ring: #39ff14;
}

/* Light tokens are defined for the v1.1 explicit toggle. They are NOT
 * activated by `prefers-color-scheme` per the Q1 sign-off override.
 */
[data-theme="light"] {
    --color-bg: #fafafa;
    --color-surface: #ffffff;
    --color-surface-2: #f4f4f5;
    --color-border: #e4e4e7;
    --color-text: #0a0a0a;
    --color-text-muted: #52525b;
    --color-text-disabled: #a1a1aa;
    --color-primary: #39ff14;
    --color-primary-contrast: #000000;
    --color-primary-muted: #2bc20f;
    --color-secondary: #ff6b35;
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #3b82f6;
    --color-focus-ring: #39ff14;
}

/* ============================================================
 * 3.2 Typography
 * ============================================================ */
:root {
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

    --text-xs: 0.75rem;     /* 12 */
    --text-sm: 0.875rem;    /* 14 */
    --text-base: 1rem;      /* 16 */
    --text-lg: 1.125rem;    /* 18 */
    --text-xl: 1.25rem;     /* 20 */
    --text-2xl: 1.5rem;     /* 24 */
    --text-3xl: 1.875rem;   /* 30 */
    --text-4xl: 2.25rem;    /* 36 */
    --text-5xl: 3rem;       /* 48 */
    --text-6xl: 3.75rem;    /* 60 */

    --leading-tight: 1.2;
    --leading-normal: 1.5;
}

/* ============================================================
 * 3.3 Spacing scale
 * ============================================================ */
:root {
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;
}

/* ============================================================
 * 3.4 Radius, shadow, motion
 * ============================================================ */
:root {
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.20);

    --motion-fast: 120ms cubic-bezier(.4, 0, .2, 1);
    --motion-base: 200ms cubic-bezier(.4, 0, .2, 1);
    --motion-slow: 320ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms linear;
        --motion-base: 0ms linear;
        --motion-slow: 0ms linear;
    }
}

/* ============================================================
 * 3.5 Breakpoints (custom-property mirrors of the @media values;
 *     consumed via container queries / fallback maps where needed)
 * ============================================================ */
:root {
    --bp-xs: 0px;
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1280px;
}

/* ============================================================
 * 3.6 Z-index scale
 * ============================================================ */
:root {
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-bg: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-toast: 1070;
    --z-tooltip: 1080;
}