/* kocmoc panel — split from panel.css (2026-07-17 UI audit fixes) */
/* ============================================
   kocmoc — Cosmic Control Panel
   Dark: Deep Space / Light: Ground Control
   Inspired by Linear, Raycast, Vercel
   ============================================ */

/* ---- DARK THEME — Deep Space ---- */
:root,
[data-theme="dark"] {
    --bg-base: #08090c;
    --bg-panel: #0e1015;
    --bg-surface: rgba(255, 255, 255, 0.025);
    --bg-surface-solid: #15181f;
    --bg-elevated: rgba(255, 255, 255, 0.04);
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-glass: rgba(15, 17, 22, 0.6);
    --bg-tertiary: var(--bg-elevated);

    --text-primary: #e8eaed;
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;
    --text-quaternary: #565d66;
    --text-muted: var(--text-tertiary);

    --accent: #6366f1;
    --accent-hover: #818cf8;
    --accent-bright: #a5b4fc;
    --accent-subtle: rgba(99, 102, 241, 0.12);
    --accent-glow: rgba(99, 102, 241, 0.4);
    --accent-text: #a5b4fc;

    --signal-online: #34d399;
    --signal-offline: #f87171;
    --signal-warning: #fbbf24;
    --signal-online-bg: rgba(52, 211, 153, 0.1);
    --signal-offline-bg: rgba(248, 113, 113, 0.1);
    --signal-warning-bg: rgba(251, 191, 36, 0.1);

    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-standard: rgba(255, 255, 255, 0.08);
    --border-solid: #1f2229;
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-glow: rgba(99, 102, 241, 0.3);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 24px var(--accent-glow);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255,255,255,0.03);

    --overlay: rgba(0, 0, 0, 0.8);
    --scrollbar-thumb: #2a2d36;
    --scrollbar-hover: #363944;

    /* Aurora gradient colors */
    --aurora-1: rgba(99, 102, 241, 0.15);
    --aurora-2: rgba(168, 85, 247, 0.10);
    --aurora-3: rgba(59, 130, 246, 0.10);
    --aurora-4: rgba(236, 72, 153, 0.08);
}

/* ---- LIGHT THEME — Ground Control ---- */
[data-theme="light"] {
    --bg-base: #f3f4f8;
    --bg-panel: #ffffff;
    --bg-sidebar: #fafbfc;
    --bg-surface: #ffffff;
    --bg-surface-solid: #ffffff;
    --bg-elevated: #f3f4f8;
    --bg-hover: #ebedf2;
    --bg-glass: rgba(255, 255, 255, 0.7);
    --bg-tertiary: var(--bg-elevated);

    --text-primary: #0f1117;
    --text-secondary: #4b5563;
    --text-tertiary: #9ca3af;
    --text-quaternary: #9ca3af;
    --text-muted: var(--text-tertiary);

    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-bright: #6366f1;
    --accent-subtle: rgba(79, 70, 229, 0.08);
    --accent-glow: rgba(79, 70, 229, 0.25);
    --accent-text: #4f46e5;

    --signal-online: #059669;
    --signal-offline: #dc2626;
    --signal-warning: #d97706;
    --signal-online-bg: rgba(5, 150, 105, 0.08);
    --signal-offline-bg: rgba(220, 38, 38, 0.08);
    --signal-warning-bg: rgba(217, 119, 6, 0.08);

    --border-subtle: rgba(0, 0, 0, 0.05);
    --border-standard: rgba(0, 0, 0, 0.08);
    --border-solid: #e5e7eb;
    --border-hover: rgba(0, 0, 0, 0.12);
    --border-glow: rgba(79, 70, 229, 0.2);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 24px var(--accent-glow);
    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0,0,0,0.02);

    --overlay: rgba(0, 0, 0, 0.3);
    --scrollbar-thumb: #d1d5db;
    --scrollbar-hover: #b5b9c2;

    --aurora-1: rgba(79, 70, 229, 0.07);
    --aurora-2: rgba(168, 85, 247, 0.05);
    --aurora-3: rgba(59, 130, 246, 0.05);
    --aurora-4: rgba(236, 72, 153, 0.04);
}

/* ---- SHARED TOKENS ---- */
:root {
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 9999px;

    /* File manager tokens */
    --file-thumb-size: 64px;
    --file-thumb-size-list: 40px;

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Sora', var(--font-sans);
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition: 0.2s var(--ease-out);
    --transition-slow: 0.4s var(--ease-out);
}