:root {
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-900: #0f172a;
    --primary: #3b82f6;
    --primary-light: #dbeafe;
    --highlight-cell: #bfdbfe;
    --focus-cell: #3b82f6;
    
    --brand: var(--primary);
    --brand-hover: #2563eb;
    --white: #ffffff;
    --bg: var(--slate-50);
    --text-main: var(--slate-900);
    --border: var(--slate-200);
    
    --space-2: 8px;
    --space-4: 16px;
    --space-6: 24px;
    
    --shadow-float: 0 -10px 40px -5px rgba(0,0,0,0.1);
}