:root {
    /* ── Backgrounds ─────────────────────────────── */
    --bg-page:       #050507;
    --bg-surface-1:  #0C0D10;
    --bg-surface-2:  #121316;
    --bg-surface-3:  #1A1B1F;

    /* ── Borders ─────────────────────────────────── */
    --border:        rgba(255, 255, 255, 0.05);
    --border-hover:  rgba(255, 255, 255, 0.09);
    --border-active: rgba(255, 255, 255, 0.14);

    /* ── Text ────────────────────────────────────── */
    --text-1:        #EDEDF0;
    --text-2:        #8B8B97;
    --text-3:        #4A4A55;
    --text-4:        #2A2A32;
    --text-white:    #F5F5F7;

    /* ── Accent (use sparingly) ──────────────────── */
    --accent:        #6366F1;
    --accent-dim:    rgba(99, 102, 241, 0.10);
    --accent-glow:   rgba(99, 102, 241, 0.06);

    /* ── Status ──────────────────────────────────── */
    --positive:      #10B981;
    --caution:       #F59E0B;
    --negative:      #EF4444;

    /* ── Typography ──────────────────────────────── */
    --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* ── Spacing (8px rhythm) ────────────────────── */
    --s1: 4px;
    --s2: 8px;
    --s3: 16px;
    --s4: 24px;
    --s5: 40px;
    --s6: 64px;
    --s7: 80px;
    --s8: 120px;

    /* ── Layout ──────────────────────────────────── */
    --content-max:   1080px;
    --sidebar-w:     220px;

    /* ── Radius ──────────────────────────────────── */
    --radius-s:  6px;
    --radius-m:  10px;
    --radius-l:  14px;

    /* ── Motion ──────────────────────────────────── */
    --ease:       cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:   0.25s;
    --dur:        0.4s;
    --dur-slow:   0.6s;
}