/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
    /* Background colors */
    --bg-body: #0f172a;
    --bg-primary: #1e293b;
    --bg-secondary: #334155;
    --bg-tertiary: #475569;

    /* Text colors */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Border */
    --border-color: #334155;

    /* Brand colors */
    --primary: #60a5fa;
    --primary-hover: #3b82f6;
    --primary-light: #93c5fd;
    --accent: #34d399;
    --accent-light: #6ee7b7;

    /* Status colors */
    --danger: #f87171;
    --warning: #facc15;

    /* Radius & shadows */
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 2px 8px rgba(0,0,0,.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,.4);

    /* Column type colors */
    --type-integer: #60a5fa;
    --type-float: #a78bfa;
    --type-categorical: #f472b6;
    --type-datetime: #facc15;
    --type-boolean: #34d399;
}