/*
 * CB Panel - Global Design Tokens
 * Root-level CSS variables only.
 */

:root {
    /* ─── Brand Colors ─────────────────────────────────── */
    --cbpanel-primary: #ffb90d;
    --cbpanel-primary-hover: #e6a700;
    --cbpanel-danger: #E11D48;
    --cbpanel-danger-hover: #be123c;
    --cbpanel-success: #22c55e;
    --cbpanel-warning: #f59e0b;

    /* ─── Frontend Dark Theme ─────────────────────────── */
    --cbpanel-bg-dark: #0F1115;
    --cbpanel-card-dark: #1a1a1a;
    --cbpanel-card-dark-alt: #111318;
    --cbpanel-border-dark: #2d3039;
    --cbpanel-text-white: #ffffff;
    --cbpanel-text-light-muted: #6b7280;
    --cbpanel-text-light-secondary: #9ca3af;
    
    /* ─── Slate Palette (Receipt/Text) ────────────────── */
    --cbpanel-slate-100: #f1f5f9;
    --cbpanel-slate-200: #e2e8f0;
    --cbpanel-slate-500: #64748b;
    --cbpanel-slate-800: #1e293b;
    --cbpanel-slate-900: #0f172a;

    /* ─── OTHERS ─────────────────────────────────────── */
    --cbpanel-pure-white: #ffffff;
    --cbpanel-bluish-grey: #F9FAFC;

    /* ─── Borders ──────────────────────────────────────── */
    --cbpanel-border: #e2e8f0;
    --cbpanel-border-light: #f1f5f9;
    --cbpanel-input-border: #cbd5e1;

    /* ─── Status ───────────────────────────────────────── */
    --cbpanel-status-green: #10b981;
    --cbpanel-status-red: #ef4444;
    --cbpanel-light-green: #11b98161;

    /* ─── Text ─────────────────────────────────────────── */
    --cbpanel-text-primary: #000000;
    --cbpanel-text-secondary: #475569;
    --cbpanel-text-muted: #94a3b8;
    --cbpanel-text-placeholder: #94a3b8;

    /* ─── Typography ───────────────────────────────────── */
    --cbpanel-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ─── Spacing ──────────────────────────────────────── */
    --cbpanel-space-xs: 4px;
    --cbpanel-space-sm: 8px;
    --cbpanel-space-md: 12px;
    --cbpanel-space-lg: 16px;
    --cbpanel-space-xl: 20px;
    --cbpanel-space-2xl: 24px;
    --cbpanel-space-3xl: 32px;

    /* ─── Shadows ──────────────────────────────────────── */
    --cbpanel-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --cbpanel-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
}