/*
 * tokens.css — canonical CSS custom-property layer for the SiteKings RMM UI.
 *
 * Loaded BEFORE style.css so style.css (and any page-local <style> blocks) can
 * still override. This file only defines variables; it MUST NOT contain any
 * selectors that paint pixels on their own (no `body { background: ... }`).
 *
 * Bundle E (foundation). Per-page migration to these tokens is Bundle I.
 *
 * Naming scheme:
 *   --bg, --bg-elevated, --surface, --surface-hover  — page + card backgrounds
 *   --text, --text-muted, --text-faint               — text colors
 *   --border, --border-strong                        — divider/outline colors
 *   --accent, --accent-hover                         — primary action / links
 *   --success / --warning / --danger / --info (+ -soft variants)
 *   --shadow-sm / -md / -lg
 *   --space-1 .. --space-8                           — 4/8/12/16/24/32/48/64
 *   --radius-sm / -md / -lg                          — 4/8/12
 *   --font-sans, --font-mono
 *   --text-xs .. --text-2xl
 *   --weight-normal / -medium / -semibold / -bold
 *
 * Backward-compat aliases at the bottom keep legacy `--md-*`, `--int-*`, etc
 * resolving so nothing visually regresses while pages migrate. Aliases are
 * deprecated — see docs/ui-tokens.md.
 */

:root {
    /* ── Surfaces / backgrounds ─────────────────────────────────────────── */
    --bg: #0f1117;
    --bg-elevated: #1a1d27;
    --surface: #1a1d27;
    --surface-hover: #232733;
    --surface-input: #232733;

    /* ── Text ───────────────────────────────────────────────────────────── */
    --text: #e1e4ed;
    --text-muted: #8b8fa3;
    --text-faint: #6b6f80;

    /* ── Borders ────────────────────────────────────────────────────────── */
    --border: #2d3140;
    --border-strong: #3a3f52;

    /* ── Accent / brand ─────────────────────────────────────────────────── */
    --accent: #4a9eff;
    --accent-hover: #6bb2ff;
    --accent-soft: rgba(74, 158, 255, 0.12);

    /* ── Status colors ──────────────────────────────────────────────────── */
    --success: #22c55e;
    --success-soft: rgba(34, 197, 94, 0.14);
    --warning: #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.14);
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.14);
    --info: #38bdf8;
    --info-soft: rgba(56, 189, 248, 0.14);

    /* ── Shadows ────────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.25);

    /* ── Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px) ─────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* ── Radius (4 / 8 / 12) ────────────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* ── Typography — families ──────────────────────────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* ── Typography — sizes ─────────────────────────────────────────────── */
    --text-xs: 0.72rem;
    --text-sm: 0.82rem;
    --text-base: 0.95rem;
    --text-lg: 1.10rem;
    --text-xl: 1.30rem;
    --text-2xl: 1.60rem;

    /* ── Typography — weights ───────────────────────────────────────────── */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ── Motion ─────────────────────────────────────────────────────────── */
    --transition: 0.2s ease;

    /* ─────────────────────────────────────────────────────────────────────
     * BACKWARD-COMPAT ALIASES (deprecated — migrate per Bundle I)
     *
     * These keep legacy page-local var names resolving without forcing a
     * sweep of every template at once. Each alias points at its canonical
     * token. When a page is migrated (Bundle I) its page-local declarations
     * disappear; these aliases catch any references that existed only as
     * inline `var(--md-*)` lookups.
     * ───────────────────────────────────────────────────────────────────── */

    /* Machine detail (--md-*) — page CSS lives in machine_detail_redesign.css */
    --md-bg: var(--bg);
    --md-card: var(--surface);
    --md-bd: var(--border);
    --md-fg: var(--text);
    --md-mute: var(--text-muted);
    --md-on: var(--success);
    --md-off: var(--danger);
    --md-warn: var(--warning);
    --md-info: var(--info);
    --md-accent: var(--accent);
    --md-mono: var(--font-mono);
    --md-sans: var(--font-sans);
    --md-ok: var(--success);
    --md-err: var(--danger);

    /* Legacy shorthand from style.css */
    --bg-card: var(--surface);
    --bg-input: var(--surface-input);
    --primary: var(--accent);
    --primary-hover: var(--accent-hover);
    --danger-hover: #f2555a;
    --green: var(--success);
    --yellow: var(--warning);
    --red: var(--danger);
    --radius: var(--radius-md);
}

/* ── Light mode ─────────────────────────────────────────────────────────── *
 * OS light preference is a fallback ONLY when the app has not set an explicit
 * theme. base.html sets <html data-theme="dark|light"> before first paint, and
 * the other shells hardcode data-theme="dark", so the :not([data-theme]) gate
 * means an explicit app theme always wins. Without this gate, an OS-light
 * machine (common on Windows) leaked the light surface tokens
 * (--surface/--bg-elevated/--surface-hover/...) under data-theme="dark",
 * producing white cards on a dark shell. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg: #f5f5f7;
        --bg-elevated: #ffffff;
        --surface: #ffffff;
        --surface-hover: #f0f0f2;
        --surface-input: #f0f0f2;
        --text: #1d1d1f;
        --text-muted: #6e6e73;
        --text-faint: #8e8e93;
        --border: #d2d2d7;
        --border-strong: #b8b8c0;
        --accent-soft: rgba(74, 158, 255, 0.10);
        --success-soft: rgba(34, 197, 94, 0.12);
        --warning-soft: rgba(245, 158, 11, 0.12);
        --danger-soft: rgba(239, 68, 68, 0.12);
        --info-soft: rgba(56, 189, 248, 0.12);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    }
}

/* ── Explicit-theme surface tokens ───────────────────────────────────────── *
 * The surface/soft/elevated tokens below live ONLY in :root (dark default) and
 * the gated prefers-light media query above. The [data-theme] blocks in
 * style.css do NOT redefine them. That meant:
 *   • explicit data-theme="light" never set them → with the media query now
 *     gated to :not([data-theme]), light theme would fall back to the dark
 *     :root defaults (dark cards under light theme);
 *   • explicit data-theme="dark" relied on the :root defaults, fine, but is
 *     pinned here too for symmetry/robustness.
 * Pinning the full surface set per explicit theme makes the theme self-complete
 * regardless of OS preference. */
[data-theme="dark"] {
    --bg-elevated: #1a1d27;
    --surface: #1a1d27;
    --surface-hover: #232733;
    --surface-input: #232733;
    --text-faint: #6e7180;
    --border-strong: #3a3f4f;
    --accent-soft: rgba(74, 158, 255, 0.15);
    --success-soft: rgba(34, 197, 94, 0.15);
    --warning-soft: rgba(245, 158, 11, 0.15);
    --danger-soft: rgba(239, 68, 68, 0.15);
    --info-soft: rgba(56, 189, 248, 0.15);
}

[data-theme="light"] {
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-hover: #f0f0f2;
    --surface-input: #f0f0f2;
    --text-faint: #8e8e93;
    --border-strong: #b8b8c0;
    --accent-soft: rgba(0, 113, 227, 0.10);
    --success-soft: rgba(34, 197, 94, 0.12);
    --warning-soft: rgba(245, 158, 11, 0.12);
    --danger-soft: rgba(239, 68, 68, 0.12);
    --info-soft: rgba(56, 189, 248, 0.12);
}