/* ══════════════════════════════════════════════════════════════
   PavanPower CRM — THEME TOKENS
   Each theme is a set of CSS variables, applied with:
     <html data-theme="midnight">   (whole app)
     <div  data-theme="emerald">    (mini previews on Appearance page)
   Components in includes/header.php only read these variables.
══════════════════════════════════════════════════════════════ */

/* ── Shared tokens (derived per element, so nested previews work) ── */
:root, [data-theme] {
  --accent:        var(--brand);
  --accent-dark:   var(--brand-dark);
  --accent-light:  var(--brand-light);
  --accent-mid:    var(--brand-border);

  --sh-xs:    0 1px 2px rgba(var(--sh-rgb), .06);
  --sh-sm:    0 2px 4px rgba(var(--sh-rgb), .07), 0 1px 2px rgba(var(--sh-rgb), .04);
  --sh-md:    0 4px 12px rgba(var(--sh-rgb), .08), 0 2px 4px rgba(var(--sh-rgb), .04);
  --sh-lg:    0 8px 24px rgba(var(--sh-rgb), .10), 0 4px 8px rgba(var(--sh-rgb), .05);
  --sh-xl:    0 20px 40px rgba(var(--sh-rgb), .12), 0 8px 16px rgba(var(--sh-rgb), .06);
  --sh-modal: 0 32px 64px rgba(var(--sh-rgb), .18), 0 12px 24px rgba(var(--sh-rgb), .10);
  --ring:     0 0 0 3px rgba(var(--brand-rgb), .14);
  --pill-blue-bg: var(--brand-light); --pill-blue-fg: var(--brand-dark); --pill-blue-bd: var(--brand-soft);
  --pill-gray-bg: var(--bg-subtle);   --pill-gray-fg: var(--text-3);    --pill-gray-bd: var(--border);
}
:root {
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-full: 9999px;
  --ease-fast: 110ms ease; --ease-base: 175ms ease; --ease-out: 240ms cubic-bezier(.2,.8,.2,1);
}

/* Semantic colours (shared by every theme except Midnight, which keeps its original values) */
:root, [data-theme] {
  --green: #0D9B6C;  --green-light: #E6FAF4;  --green-mid: #8DE8CE;
  --red: #D92B2B;    --red-light: #FEF0F0;    --red-mid: #F6A8A8;
  --yellow: #C47D00; --yellow-light: #FEF9E6; --yellow-mid: #FAD672;
  --orange: #C95600; --orange-light: #FEF3EA; --orange-mid: #F5B785;
  --purple: #6B30C9; --purple-light: #F3EFFE; --purple-mid: #C5ABEF;
}

/* ═════════════ 1. MIDNIGHT INDIGO — the current production look ═════════════ */
:root:not([data-theme]), [data-theme="midnight"] {
  --brand: #4F46E5; --brand-dark: #4338CA; --brand-mid: #818CF8; --brand-soft: #E0E7FF;
  --brand-light: #EEF2FF; --brand-xlight: #F7F8FF; --brand-border: #C7D2FE; --brand-rgb: 79,70,229;

  --bg: #F5F7FA; --bg-card: #FFFFFF; --bg-subtle: #F9FAFB; --bg-header: #FFFFFF; --input-bg: #FFFFFF;
  --border: #E5E7EB; --border-light: #F3F4F6; --border-strong: #D1D5DB;
  --text-1: #111827; --text-2: #374151; --text-3: #6B7280; --text-4: #9CA3AF;

  --sb-bg: #0F0F1A; --sb-dark: #0F0F1A; --sb-edge: rgba(255,255,255,.06); --sb-shadow: none;
  --sb-name: #FFFFFF; --sb-tag: rgba(255,255,255,.32);
  --sb-text: rgba(255,255,255,.5); --sb-text-hover: #FFFFFF; --sb-fg: #FFFFFF;
  --sb-hover: rgba(255,255,255,.06); --sb-active: rgba(255,255,255,.1);
  --sb-border: rgba(255,255,255,.06); --sb-section: rgba(255,255,255,.25); --sb-section-line: transparent;
  --sb-bar: #4F46E5; --sb-bar-glow: 0 0 8px rgba(99,102,241,.6);
  --sb-mark-bg: linear-gradient(135deg,#4F46E5 0%,#818CF8 100%); --sb-mark-border: transparent;
  --sb-mark-fg: #FFFFFF; --sb-mark-shadow: 0 2px 8px rgba(79,70,229,.4);
  --sb-thumb: rgba(255,255,255,.1); --sb-user-name: rgba(255,255,255,.75); --sb-user-role: rgba(255,255,255,.35);
  --sb-logout: rgba(255,255,255,.3); --sb-badge-bg: #DC2626; --sb-badge-fg: #FFFFFF;
  --sb-avatar-bg: linear-gradient(135deg,#4F46E5 0%,#818CF8 100%); --sb-avatar-border: transparent;
  --sb-plate: #FFFFFF;

  --btn-bg: #111827; --btn-hover: #1F2937;
  --th-bg: #F9FAFB; --th-fg: #6B7280; --th-border: #E5E7EB; --row-hover: #EEF2FF; --tbl-border: none;
  --kpi-stripe: none;
  --topbar-border: 1px solid #E5E7EB; --topbar-shadow: none; --crumb-app: #9CA3AF;
  --overlay: rgba(0,0,0,.45); --toast-bg: #111827; --sh-rgb: 0,0,0;
  --pill-blue-bg: #EFF6FF; --pill-blue-fg: #1D4ED8; --pill-blue-bd: #DBEAFE;
  --pill-gray-bg: #F9FAFB; --pill-gray-fg: #4B5563; --pill-gray-bd: #E5E7EB;

  --green: #059669;  --green-light: #ECFDF5;  --green-mid: #A7F3D0;
  --red: #DC2626;    --red-light: #FEF2F2;    --red-mid: #FECACA;
  --yellow: #D97706; --yellow-light: #FFFBEB; --yellow-mid: #FDE68A;
  --orange: #EA580C; --orange-light: #FFF7ED; --orange-mid: #FED7AA;
  --purple: #7C3AED; --purple-light: #F5F3FF; --purple-mid: #DDD6FE;

  --lg-bg: #0F0F1A; --lg-hero: linear-gradient(145deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
  --lg-orb-1: rgba(79,70,229,.18); --lg-orb-2: rgba(129,140,248,.12);
  --lg-accent: #4F46E5; --lg-accent-2: #818CF8; --lg-btn: #111827; --lg-btn-hover: #1F2937;
  --lg-shadow: 0 32px 80px rgba(0,0,0,.5); --lg-border: rgba(255,255,255,.06);
}

/* ═════════════ 2. CORPORATE BLUE — the light-blue facelift ═════════════ */
[data-theme="corporate"] {
  --brand: #1063B5; --brand-dark: #0A4D8F; --brand-mid: #2B7DD4; --brand-soft: #D6EAFB;
  --brand-light: #EBF4FD; --brand-xlight: #F3F8FD; --brand-border: #BBDAF5; --brand-rgb: 16,99,181;

  --bg: #EEF4FB; --bg-card: #FFFFFF; --bg-subtle: #F5F9FD; --bg-header: #FFFFFF; --input-bg: #FAFCFF;
  --border: #CBE0F4; --border-light: #E2EFF9; --border-strong: #A8CBE8;
  --text-1: #0C2340; --text-2: #1E3D60; --text-3: #4A6D8F; --text-4: #7FA3C4;

  --sb-bg: #1063B5; --sb-dark: #0A4D8F; --sb-edge: transparent; --sb-shadow: 2px 0 16px rgba(10,50,100,.15);
  --sb-name: #FFFFFF; --sb-tag: rgba(255,255,255,.38);
  --sb-text: rgba(255,255,255,.62); --sb-text-hover: rgba(255,255,255,.92); --sb-fg: #FFFFFF;
  --sb-hover: rgba(255,255,255,.09); --sb-active: rgba(255,255,255,.16);
  --sb-border: rgba(255,255,255,.10); --sb-section: rgba(255,255,255,.30); --sb-section-line: rgba(255,255,255,.08);
  --sb-bar: rgba(255,255,255,.9); --sb-bar-glow: none;
  --sb-mark-bg: rgba(255,255,255,.18); --sb-mark-border: rgba(255,255,255,.22);
  --sb-mark-fg: #FFFFFF; --sb-mark-shadow: none;
  --sb-thumb: rgba(255,255,255,.15); --sb-user-name: rgba(255,255,255,.8); --sb-user-role: rgba(255,255,255,.38);
  --sb-logout: rgba(255,255,255,.32); --sb-badge-bg: rgba(255,255,255,.9); --sb-badge-fg: #1063B5;
  --sb-avatar-bg: rgba(255,255,255,.22); --sb-avatar-border: rgba(255,255,255,.3);
  --sb-plate: #FFFFFF;

  --btn-bg: #1063B5; --btn-hover: #0A4D8F;
  --th-bg: #EBF4FD; --th-fg: #1063B5; --th-border: #BBDAF5; --row-hover: #F3F8FD; --tbl-border: 1px solid #CBE0F4;
  --kpi-stripe: linear-gradient(90deg,#EBF4FD,#BBDAF5);
  --topbar-border: 2px solid #EBF4FD; --topbar-shadow: 0 1px 0 #CBE0F4; --crumb-app: #1063B5;
  --overlay: rgba(8,30,70,.42); --toast-bg: #0C2340; --sh-rgb: 16,99,181;

  --lg-bg: #DCE9F6; --lg-hero: linear-gradient(145deg,#1063B5 0%,#0A4D8F 60%,#083B6E 100%);
  --lg-orb-1: rgba(16,99,181,.22); --lg-orb-2: rgba(43,125,212,.18);
  --lg-accent: #1063B5; --lg-accent-2: #8FC3F2; --lg-btn: #1063B5; --lg-btn-hover: #0A4D8F;
  --lg-shadow: 0 30px 70px rgba(10,50,100,.25); --lg-border: rgba(16,99,181,.12);
}

/* ═════════════ 3. EMERALD LEDGER ═════════════ */
[data-theme="emerald"] {
  --brand: #047857; --brand-dark: #065F46; --brand-mid: #10B981; --brand-soft: #D1FAE5;
  --brand-light: #ECFDF5; --brand-xlight: #F3FBF7; --brand-border: #A7E3C9; --brand-rgb: 4,120,87;

  --bg: #F0F6F3; --bg-card: #FFFFFF; --bg-subtle: #F5FAF7; --bg-header: #FFFFFF; --input-bg: #FBFDFC;
  --border: #D3E6DC; --border-light: #E6F1EB; --border-strong: #B5D3C3;
  --text-1: #0B2A1F; --text-2: #1F3D32; --text-3: #4A6B5D; --text-4: #85A396;

  --sb-bg: #065F46; --sb-dark: #053B2D; --sb-edge: transparent; --sb-shadow: 2px 0 16px rgba(5,60,45,.18);
  --sb-name: #FFFFFF; --sb-tag: rgba(255,255,255,.4);
  --sb-text: rgba(255,255,255,.64); --sb-text-hover: rgba(255,255,255,.95); --sb-fg: #FFFFFF;
  --sb-hover: rgba(255,255,255,.08); --sb-active: rgba(255,255,255,.15);
  --sb-border: rgba(255,255,255,.10); --sb-section: rgba(255,255,255,.32); --sb-section-line: rgba(255,255,255,.08);
  --sb-bar: #6EE7B7; --sb-bar-glow: 0 0 8px rgba(110,231,183,.5);
  --sb-mark-bg: rgba(255,255,255,.16); --sb-mark-border: rgba(255,255,255,.22);
  --sb-mark-fg: #FFFFFF; --sb-mark-shadow: none;
  --sb-thumb: rgba(255,255,255,.15); --sb-user-name: rgba(255,255,255,.82); --sb-user-role: rgba(255,255,255,.4);
  --sb-logout: rgba(255,255,255,.35); --sb-badge-bg: #FBBF24; --sb-badge-fg: #3B2600;
  --sb-avatar-bg: rgba(255,255,255,.2); --sb-avatar-border: rgba(255,255,255,.3);
  --sb-plate: #FFFFFF;

  --btn-bg: #047857; --btn-hover: #065F46;
  --th-bg: #ECFDF5; --th-fg: #047857; --th-border: #A7E3C9; --row-hover: #F3FBF7; --tbl-border: 1px solid #D3E6DC;
  --kpi-stripe: linear-gradient(90deg,#ECFDF5,#A7E3C9);
  --topbar-border: 2px solid #E6F1EB; --topbar-shadow: 0 1px 0 #D3E6DC; --crumb-app: #047857;
  --overlay: rgba(4,40,30,.42); --toast-bg: #0B2A1F; --sh-rgb: 4,90,65;

  --lg-bg: #062A20; --lg-hero: linear-gradient(145deg,#065F46 0%,#064E3B 55%,#03261D 100%);
  --lg-orb-1: rgba(16,185,129,.18); --lg-orb-2: rgba(110,231,183,.10);
  --lg-accent: #10B981; --lg-accent-2: #6EE7B7; --lg-btn: #047857; --lg-btn-hover: #065F46;
  --lg-shadow: 0 32px 80px rgba(0,0,0,.45); --lg-border: rgba(255,255,255,.06);
}

/* ═════════════ 4. ROYAL PURPLE ═════════════ */
[data-theme="royal"] {
  --brand: #6D28D9; --brand-dark: #5B21B6; --brand-mid: #8B5CF6; --brand-soft: #EDE9FE;
  --brand-light: #F5F3FF; --brand-xlight: #FAF8FF; --brand-border: #D8CCF9; --brand-rgb: 109,40,217;

  --bg: #F5F3FB; --bg-card: #FFFFFF; --bg-subtle: #F9F7FD; --bg-header: #FFFFFF; --input-bg: #FCFBFF;
  --border: #E2DCF3; --border-light: #EEEAF8; --border-strong: #CBBFEA;
  --text-1: #1E1438; --text-2: #352A55; --text-3: #66598A; --text-4: #9C91BD;

  --sb-bg: #4C1D95; --sb-dark: #2E1065; --sb-edge: transparent; --sb-shadow: 2px 0 16px rgba(46,16,101,.2);
  --sb-name: #FFFFFF; --sb-tag: rgba(255,255,255,.4);
  --sb-text: rgba(255,255,255,.62); --sb-text-hover: rgba(255,255,255,.95); --sb-fg: #FFFFFF;
  --sb-hover: rgba(255,255,255,.08); --sb-active: rgba(255,255,255,.15);
  --sb-border: rgba(255,255,255,.10); --sb-section: rgba(255,255,255,.32); --sb-section-line: rgba(255,255,255,.08);
  --sb-bar: #C4B5FD; --sb-bar-glow: 0 0 8px rgba(196,181,253,.55);
  --sb-mark-bg: rgba(255,255,255,.16); --sb-mark-border: rgba(255,255,255,.22);
  --sb-mark-fg: #FFFFFF; --sb-mark-shadow: none;
  --sb-thumb: rgba(255,255,255,.15); --sb-user-name: rgba(255,255,255,.82); --sb-user-role: rgba(255,255,255,.4);
  --sb-logout: rgba(255,255,255,.35); --sb-badge-bg: #F472B6; --sb-badge-fg: #FFFFFF;
  --sb-avatar-bg: rgba(255,255,255,.2); --sb-avatar-border: rgba(255,255,255,.3);
  --sb-plate: #FFFFFF;

  --btn-bg: #6D28D9; --btn-hover: #5B21B6;
  --th-bg: #F5F3FF; --th-fg: #6D28D9; --th-border: #D8CCF9; --row-hover: #FAF8FF; --tbl-border: 1px solid #E2DCF3;
  --kpi-stripe: linear-gradient(90deg,#F5F3FF,#D8CCF9);
  --topbar-border: 2px solid #EEEAF8; --topbar-shadow: 0 1px 0 #E2DCF3; --crumb-app: #6D28D9;
  --overlay: rgba(30,10,60,.42); --toast-bg: #1E1438; --sh-rgb: 76,29,149;

  --lg-bg: #170A33; --lg-hero: linear-gradient(145deg,#4C1D95 0%,#3B0F7A 55%,#1E0B45 100%);
  --lg-orb-1: rgba(139,92,246,.2); --lg-orb-2: rgba(244,114,182,.10);
  --lg-accent: #8B5CF6; --lg-accent-2: #C4B5FD; --lg-btn: #6D28D9; --lg-btn-hover: #5B21B6;
  --lg-shadow: 0 32px 80px rgba(0,0,0,.45); --lg-border: rgba(255,255,255,.06);
}

/* ═════════════ 5. OCEAN TEAL ═════════════ */
[data-theme="ocean"] {
  --brand: #0E7490; --brand-dark: #155E75; --brand-mid: #0891B2; --brand-soft: #CFFAFE;
  --brand-light: #ECFEFF; --brand-xlight: #F4FCFD; --brand-border: #A5E3EE; --brand-rgb: 14,116,144;

  --bg: #EEF6F8; --bg-card: #FFFFFF; --bg-subtle: #F5FAFB; --bg-header: #FFFFFF; --input-bg: #FBFEFE;
  --border: #CFE3E8; --border-light: #E3EFF2; --border-strong: #AFCFD7;
  --text-1: #0B2530; --text-2: #1E3E4A; --text-3: #4B6B77; --text-4: #84A2AD;

  --sb-bg: #0E7490; --sb-dark: #134E5E; --sb-edge: transparent; --sb-shadow: 2px 0 16px rgba(10,60,75,.18);
  --sb-name: #FFFFFF; --sb-tag: rgba(255,255,255,.42);
  --sb-text: rgba(255,255,255,.66); --sb-text-hover: rgba(255,255,255,.95); --sb-fg: #FFFFFF;
  --sb-hover: rgba(255,255,255,.09); --sb-active: rgba(255,255,255,.16);
  --sb-border: rgba(255,255,255,.12); --sb-section: rgba(255,255,255,.34); --sb-section-line: rgba(255,255,255,.09);
  --sb-bar: #A5F3FC; --sb-bar-glow: 0 0 8px rgba(165,243,252,.5);
  --sb-mark-bg: rgba(255,255,255,.18); --sb-mark-border: rgba(255,255,255,.24);
  --sb-mark-fg: #FFFFFF; --sb-mark-shadow: none;
  --sb-thumb: rgba(255,255,255,.16); --sb-user-name: rgba(255,255,255,.84); --sb-user-role: rgba(255,255,255,.42);
  --sb-logout: rgba(255,255,255,.36); --sb-badge-bg: #FDE68A; --sb-badge-fg: #5B3B00;
  --sb-avatar-bg: rgba(255,255,255,.2); --sb-avatar-border: rgba(255,255,255,.3);
  --sb-plate: #FFFFFF;

  --btn-bg: #0E7490; --btn-hover: #155E75;
  --th-bg: #ECFEFF; --th-fg: #0E7490; --th-border: #A5E3EE; --row-hover: #F4FCFD; --tbl-border: 1px solid #CFE3E8;
  --kpi-stripe: linear-gradient(90deg,#ECFEFF,#A5E3EE);
  --topbar-border: 2px solid #E3EFF2; --topbar-shadow: 0 1px 0 #CFE3E8; --crumb-app: #0E7490;
  --overlay: rgba(5,40,50,.42); --toast-bg: #0B2530; --sh-rgb: 14,90,110;

  --lg-bg: #082A33; --lg-hero: linear-gradient(145deg,#0E7490 0%,#155E75 55%,#0B3440 100%);
  --lg-orb-1: rgba(8,145,178,.2); --lg-orb-2: rgba(165,243,252,.10);
  --lg-accent: #0891B2; --lg-accent-2: #A5F3FC; --lg-btn: #0E7490; --lg-btn-hover: #155E75;
  --lg-shadow: 0 32px 80px rgba(0,0,0,.45); --lg-border: rgba(255,255,255,.06);
}

/* ═════════════ 6. GRAPHITE — slate sidebar, blue accent ═════════════ */
[data-theme="graphite"] {
  --brand: #2563EB; --brand-dark: #1D4ED8; --brand-mid: #3B82F6; --brand-soft: #DBEAFE;
  --brand-light: #EFF6FF; --brand-xlight: #F6F9FF; --brand-border: #BFDBFE; --brand-rgb: 37,99,235;

  --bg: #F3F4F6; --bg-card: #FFFFFF; --bg-subtle: #F9FAFB; --bg-header: #FFFFFF; --input-bg: #FFFFFF;
  --border: #E2E5EA; --border-light: #F0F2F5; --border-strong: #CDD2DA;
  --text-1: #111827; --text-2: #374151; --text-3: #6B7280; --text-4: #9CA3AF;

  --sb-bg: #1F2937; --sb-dark: #111827; --sb-edge: transparent; --sb-shadow: 2px 0 14px rgba(0,0,0,.12);
  --sb-name: #FFFFFF; --sb-tag: rgba(255,255,255,.38);
  --sb-text: rgba(255,255,255,.58); --sb-text-hover: #FFFFFF; --sb-fg: #FFFFFF;
  --sb-hover: rgba(255,255,255,.06); --sb-active: rgba(59,130,246,.18);
  --sb-border: rgba(255,255,255,.08); --sb-section: rgba(255,255,255,.3); --sb-section-line: rgba(255,255,255,.06);
  --sb-bar: #3B82F6; --sb-bar-glow: 0 0 8px rgba(59,130,246,.55);
  --sb-mark-bg: linear-gradient(135deg,#2563EB 0%,#60A5FA 100%); --sb-mark-border: transparent;
  --sb-mark-fg: #FFFFFF; --sb-mark-shadow: 0 2px 8px rgba(37,99,235,.35);
  --sb-thumb: rgba(255,255,255,.12); --sb-user-name: rgba(255,255,255,.8); --sb-user-role: rgba(255,255,255,.38);
  --sb-logout: rgba(255,255,255,.32); --sb-badge-bg: #EF4444; --sb-badge-fg: #FFFFFF;
  --sb-avatar-bg: linear-gradient(135deg,#2563EB 0%,#60A5FA 100%); --sb-avatar-border: transparent;
  --sb-plate: #FFFFFF;

  --btn-bg: #2563EB; --btn-hover: #1D4ED8;
  --th-bg: #F9FAFB; --th-fg: #4B5563; --th-border: #E2E5EA; --row-hover: #F6F9FF; --tbl-border: 1px solid #E2E5EA;
  --kpi-stripe: linear-gradient(90deg,#EFF6FF,#BFDBFE);
  --topbar-border: 1px solid #E2E5EA; --topbar-shadow: none; --crumb-app: #6B7280;
  --overlay: rgba(10,15,25,.45); --toast-bg: #111827; --sh-rgb: 17,24,39;

  --lg-bg: #111827; --lg-hero: linear-gradient(145deg,#1F2937 0%,#111827 60%,#0B1220 100%);
  --lg-orb-1: rgba(37,99,235,.18); --lg-orb-2: rgba(96,165,250,.10);
  --lg-accent: #3B82F6; --lg-accent-2: #93C5FD; --lg-btn: #2563EB; --lg-btn-hover: #1D4ED8;
  --lg-shadow: 0 32px 80px rgba(0,0,0,.5); --lg-border: rgba(255,255,255,.06);
}

/* ═════════════ 7. CLEAN LIGHT — white sidebar ═════════════ */
[data-theme="light"] {
  --brand: #2457D6; --brand-dark: #1C45AD; --brand-mid: #4C7BEA; --brand-soft: #DCE6FB;
  --brand-light: #EEF3FD; --brand-xlight: #F6F8FE; --brand-border: #C3D3F6; --brand-rgb: 36,87,214;

  --bg: #F6F7F9; --bg-card: #FFFFFF; --bg-subtle: #F9FAFB; --bg-header: #FFFFFF; --input-bg: #FFFFFF;
  --border: #E4E7EC; --border-light: #F1F3F6; --border-strong: #D0D5DD;
  --text-1: #101828; --text-2: #344054; --text-3: #667085; --text-4: #98A2B3;

  --sb-bg: #FFFFFF; --sb-dark: #FFFFFF; --sb-edge: #E4E7EC; --sb-shadow: none;
  --sb-name: #101828; --sb-tag: #98A2B3;
  --sb-text: #475467; --sb-text-hover: #101828; --sb-fg: #1C45AD;
  --sb-hover: #F2F4F7; --sb-active: #EEF3FD;
  --sb-border: #EAECF0; --sb-section: #98A2B3; --sb-section-line: #F1F3F6;
  --sb-bar: #2457D6; --sb-bar-glow: none;
  --sb-mark-bg: linear-gradient(135deg,#2457D6 0%,#4C7BEA 100%); --sb-mark-border: transparent;
  --sb-mark-fg: #FFFFFF; --sb-mark-shadow: 0 2px 6px rgba(36,87,214,.3);
  --sb-thumb: #E4E7EC; --sb-user-name: #101828; --sb-user-role: #667085;
  --sb-logout: #98A2B3; --sb-badge-bg: #D92D20; --sb-badge-fg: #FFFFFF;
  --sb-avatar-bg: linear-gradient(135deg,#2457D6 0%,#4C7BEA 100%); --sb-avatar-border: transparent;
  --sb-plate: transparent;

  --btn-bg: #2457D6; --btn-hover: #1C45AD;
  --th-bg: #F9FAFB; --th-fg: #475467; --th-border: #E4E7EC; --row-hover: #F6F8FE; --tbl-border: 1px solid #E4E7EC;
  --kpi-stripe: none;
  --topbar-border: 1px solid #E4E7EC; --topbar-shadow: none; --crumb-app: #667085;
  --overlay: rgba(16,24,40,.4); --toast-bg: #101828; --sh-rgb: 16,24,40;

  --lg-bg: #EEF1F6; --lg-hero: linear-gradient(145deg,#2457D6 0%,#1C45AD 60%,#15357F 100%);
  --lg-orb-1: rgba(36,87,214,.14); --lg-orb-2: rgba(76,123,234,.12);
  --lg-accent: #2457D6; --lg-accent-2: #A9C1F5; --lg-btn: #2457D6; --lg-btn-hover: #1C45AD;
  --lg-shadow: 0 30px 70px rgba(16,24,40,.18); --lg-border: #E4E7EC;
}