/* ============================================================
   PixLab Forensic — Design Tokens
   Single source of truth for palette, type, spacing, motion.
   Dark is default; [data-theme="light"] overrides variables only.
   ============================================================ */

:root {
    /* Palette — dark (default) */
    --bg-900: #0a0a0c;
    --bg-800: #121216;
    --bg-700: #1a1a20;
    --bg-600: #272730;
    --border-500: #3f3f4e;
    --text-muted: #8b8b99;
    --text-high: #e5e5eb;

    /* Alpha derivatives */
    --border-a30: rgba(63, 63, 78, 0.30);
    --border-a20: rgba(63, 63, 78, 0.20);
    --border-a50: rgba(63, 63, 78, 0.50);
    --glass-bg: rgba(18, 18, 22, 0.72);
    --panel-tint: rgba(10, 10, 12, 0.50);
    --bubble-system-bg: rgba(26, 26, 32, 0.80);
    --grid-line: rgba(255, 255, 255, 0.03);

    /* Accents */
    --accent-cyan: #06b6d4;
    --accent-blue: #3b82f6;
    --accent-purple: #8b5cf6;
    --accent-green: #10b981;
    --accent-red: #ef4444;

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

    /* Spacing scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;

    /* Radii */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 999px;

    /* Layout dimensions */
    --sidebar-w: 16rem;
    --sidebar-w-collapsed: 5.25rem;
    --inspector-w: 22rem;
    --topbar-h: 4rem;
    --playbar-h: 3rem;

    /* Shadows */
    --shadow-pane: 0 20px 40px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.35);
    --shadow-btn: 0 4px 14px rgba(59, 130, 246, 0.25);

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

/* ------------------------------------------------------------
   Light theme — variable overrides only.
   Maps the forensic dark scale to light equivalents.
   ------------------------------------------------------------ */
[data-theme="light"] {
    --bg-900: #f9fafb;
    --bg-800: #ffffff;
    --bg-700: #f3f4f6;
    --bg-600: #e5e7eb;
    --border-500: #d1d5db;
    --text-muted: #6b7280;
    --text-high: #111827;

    --border-a30: rgba(209, 213, 219, 0.60);
    --border-a20: rgba(209, 213, 219, 0.45);
    --border-a50: rgba(156, 163, 175, 0.60);
    --glass-bg: rgba(255, 255, 255, 0.82);
    --panel-tint: rgba(243, 244, 246, 0.60);
    --bubble-system-bg: rgba(243, 244, 246, 0.90);
    --grid-line: rgba(0, 0, 0, 0.05);

    --shadow-pane: 0 20px 40px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.08);
    --shadow-btn: 0 4px 14px rgba(59, 130, 246, 0.18);
}