/* ============================================================
   Ballour Admin Theme v2 — Design Tokens
   ------------------------------------------------------------
   ALL v2 styles are scoped under `body.theme-v2 ...`
   so this layer is 100% inert when the theme flag is off.
   ============================================================ */

body.theme-v2 {
    /* ===== Brand (Ballour) ===== */
    --bl-brand: #01529a;
    --bl-brand-600: #014a8c;
    --bl-brand-700: #013d73;
    --bl-brand-50: #e6eef7;
    --bl-brand-100: #cce0ee;
    --bl-accent: #33faff;

    /* ===== Sidebar (Navy) ===== */
    --bl-sidebar-bg: #1a2942;
    --bl-sidebar-bg-2: #243454;
    --bl-sidebar-border: #2a3a5c;
    --bl-sidebar-text: #94a3b8;
    --bl-sidebar-text-active: #ffffff;
    --bl-sidebar-section: #64748b;
    --bl-sidebar-hover-bg: #243454;

    /* ===== Page surface ===== */
    --bl-bg: #f5f7fa;
    --bl-surface: #ffffff;
    --bl-surface-2: #f8fafc;
    --bl-border: #e2e8f0;
    --bl-border-strong: #cbd5e1;

    /* ===== Text ===== */
    --bl-text: #1e293b;
    --bl-text-muted: #64748b;
    --bl-text-soft: #94a3b8;
    --bl-heading: #0f172a;

    /* ===== Status / Soft tints (KPI + pills) ===== */
    --bl-tint-pink-bg: #fce7f3;
    --bl-tint-pink-fg: #be185d;

    --bl-tint-blue-bg: #dbeafe;
    --bl-tint-blue-fg: #01529a;

    --bl-tint-green-bg: #d1fae5;
    --bl-tint-green-fg: #065f46;

    --bl-tint-yellow-bg: #fef3c7;
    --bl-tint-yellow-fg: #92400e;

    --bl-tint-orange-bg: #ffedd5;
    --bl-tint-orange-fg: #9a3412;

    --bl-tint-purple-bg: #ede9fe;
    --bl-tint-purple-fg: #5b21b6;

    --bl-tint-red-bg: #fee2e2;
    --bl-tint-red-fg: #991b1b;

    --bl-tint-cyan-bg: #cffafe;
    --bl-tint-cyan-fg: #155e75;

    /* ===== Status (semantic) ===== */
    --bl-success: #22c55e;
    --bl-warning: #f59e0b;
    --bl-danger: #ef4444;
    --bl-info: #0ea5e9;

    /* ===== Shape & motion ===== */
    --bl-radius-sm: 8px;
    --bl-radius: 12px;
    --bl-radius-lg: 16px;
    --bl-radius-pill: 999px;

    --bl-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --bl-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --bl-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    --bl-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);

    --bl-ease: cubic-bezier(.4, 0, .2, 1);
    --bl-dur: 180ms;

    /* ===== Layout ===== */
    --bl-sidebar-w: 260px;
    --bl-sidebar-w-collapsed: 72px;
    --bl-topbar-h: 68px;

    /* ===== Typography ===== */
    --bl-font: 'Tajawal', system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ============================================================
   Reset some legacy globals only when v2 is active
   ============================================================ */
body.theme-v2 {
    background: var(--bl-bg) !important;
    color: var(--bl-text) !important;
    font-family: var(--bl-font);
}

body.theme-v2 h1,
body.theme-v2 h2,
body.theme-v2 h3,
body.theme-v2 h4,
body.theme-v2 h5,
body.theme-v2 h6 {
    color: var(--bl-heading);
    font-family: var(--bl-font);
}

body.theme-v2 a {
    color: var(--bl-brand);
}

body.theme-v2 a:hover,
body.theme-v2 a:focus {
    color: var(--bl-brand-600);
}

body.theme-v2 ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.theme-v2 ::-webkit-scrollbar-track {
    background: transparent;
}

body.theme-v2 ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: var(--bl-radius-pill);
}

body.theme-v2 ::-webkit-scrollbar-thumb:hover {
    background: var(--bl-brand);
}