/* ============================================================
   CCTV Designer v2 — Design Tokens
   Single source of truth for colors, spacing, typography, radii.
   Dark theme is default; light theme overrides via [data-theme].
   ============================================================ */

:root {
    color-scheme: dark;
    /* ---- Color: brand ---- */
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-400: #60a5fa;
    --brand-glow: rgba(59, 130, 246, 0.35);

    /* ---- Color: semantic ---- */
    --success: #10b981;
    --success-soft: rgba(16, 185, 129, 0.15);
    --warning: #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.15);
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.12);
    --info: #38bdf8;
    --info-soft: rgba(56, 189, 248, 0.12);

    /* ---- Color: surfaces (dark) ---- */
    --bg-0: #0b0f1a;          /* app background / canvas void */
    --bg-1: #111827;          /* panels */
    --bg-2: #1a2332;          /* raised: cards, inputs */
    --bg-3: #243044;          /* hover / active chrome */
    --bg-inset: #0d1420;      /* wells, code, canvas surround */

    /* ---- Color: borders ---- */
    --border-1: #1f2937;      /* subtle separators */
    --border-2: #2d3a4f;      /* inputs, cards */
    --border-3: #3d4b63;      /* strong / focus rings */

    /* ---- Color: text ---- */
    --text-1: #f1f5f9;        /* primary */
    --text-2: #cbd5e1;        /* secondary */
    --text-3: #7e8ca3;        /* muted */
    --text-4: #55627a;        /* faint / placeholders */

    /* ---- Typography ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-md: 13px;
    --text-lg: 15px;
    --text-xl: 18px;
    --leading: 1.45;

    /* ---- Spacing scale (4px base) ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* ---- Radii (flat/square design) ---- */
    --r-sm: 0px;
    --r-md: 0px;
    --r-lg: 2px;
    --r-xl: 2px;
    --r-full: 2px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-glow: 0 0 0 3px var(--brand-glow);

    /* ---- Sizing: chrome ---- */
    --topbar-h: 48px;
    --rail-w: 48px;
    --panel-w: 300px;
    --statusbar-h: 26px;

    /* ---- Motion ---- */
    --t-fast: 120ms cubic-bezier(0.2, 0, 0.4, 1);
    --t-med: 200ms cubic-bezier(0.2, 0, 0.4, 1);
}

/* ---- Light theme overrides (built early, applied later) ---- */
[data-theme="light"] {
    color-scheme: light;
    --bg-0: #eef2f7;
    --bg-1: #ffffff;
    --bg-2: #f4f7fb;
    --bg-3: #e7edf5;
    --bg-inset: #e4eaf2;

    --border-1: #dde5ef;
    --border-2: #c3cfdd;
    --border-3: #9fb0c5;

    --text-1: #0f172a;
    --text-2: #334155;
    --text-3: #64748b;
    --text-4: #94a3b8;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);
}