/* === Design Tokens === */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #0a0a10;
    --bg-card: #12121c;
    --bg-sidebar: #0d0d15;
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.12);
    --text: #e0e0e0;
    --text-muted: #666;
    --text-dim: #444;
    --accent: #818cf8;
    --accent-dim: rgba(99,102,241,0.1);
    --green: #4ade80;
    --green-dim: rgba(74,222,128,0.1);
    --red: #f87171;
    --red-dim: rgba(248,113,113,0.1);
    --yellow: #fbbf24;
    --yellow-dim: rgba(251,191,36,0.1);
    --cyan: #4ecdc4;
    --pink: #ff6b9d;
    --purple: #a78bfa;
    --code-bg: #0a0a14;
    --pipe-inner: #0a0a10;

    /* Polish tokens */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition: 0.2s ease;
    --shadow-card: 0 2px 12px rgba(0,0,0,0.3);
    --shadow-hover: 0 4px 20px rgba(0,0,0,0.4);
    --blur-sidebar: blur(12px);
    --gap-section: 24px;
    --gap-grid: 20px;
}

body.theme-light {
    --bg: #f5f5f7;
    --bg-card: #ffffff;
    --bg-sidebar: rgba(255,255,255,0.85);
    --border: rgba(0,0,0,0.08);
    --border-hover: rgba(0,0,0,0.18);
    --text: #1a1a25;
    --text-muted: #6b7280;
    --text-dim: #9ca3af;
    --accent-dim: rgba(99,102,241,0.08);
    --code-bg: #f3f4f6;
    --pipe-inner: #f5f5f7;
    --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-hover: 0 6px 24px rgba(0,0,0,0.1);
}