/* ══════════════════════════════════════════════════════════════════
   tokens.css — Design Tokens v3 · Conciliadora EDI
   Base visual compartilhada para light/dark, shell, superfícies e tabela.
   Tipografia principal: Inter
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand ── */
    --brand-blue:         #004B98;
    --brand-blue-light:   #1F6FD6;
    --brand-blue-ink:     #09345C;
    --brand-orange:       #ED5600;
    --brand-orange-light: #FF7B35;
    --brand-orange-deep:  #BF4B0A;
    --brand-teal:         #1AAE9F;
    --brand-teal-light:   #35C9BB;
    --brand-navy:         #0E1625;

    /* ── Semantic ── */
    --color-primary:       var(--brand-blue);
    --color-primary-soft:  #E8F1FE;
    --color-primary-dark:  #083D78;
    --color-accent:        var(--brand-orange);
    --color-accent-soft:   #FFF2E8;
    --color-accent-dark:   #C14D0D;
    --color-success:       #159A6B;
    --color-success-soft:  #E8FBF3;
    --color-warning:       #E5891E;
    --color-warning-soft:  #FFF5E8;
    --color-danger:        #D14343;
    --color-danger-soft:   #FFF0F0;
    --color-info:          #2C74D8;
    --color-info-soft:     #EAF2FF;
    --color-teal:          var(--brand-teal);
    --color-teal-soft:     #E6FBF8;

    /* ── Surfaces / Text (Light) ── */
    --color-background:        #F3F5F8;
    --color-background-elevated:#EEF2F7;
    --color-surface:           rgba(255, 255, 255, 0.96);
    --color-surface-alt:       #F8FAFC;
    --color-surface-soft:      #F6F8FB;
    --color-surface-raised:    #FFFFFF;
    --color-surface-secondary: #EEF3F8;
    --color-surface-muted:     #F2F5F8;
    --color-text:              #101828;
    --color-text-primary:      #101828;
    --color-text-secondary:    #475467;
    --color-text-muted:        #667085;
    --color-text-tertiary:     #98A2B3;
    --color-border:            rgba(15, 23, 42, 0.10);
    --color-border-strong:     rgba(15, 23, 42, 0.16);
    --color-border-light:      rgba(15, 23, 42, 0.06);

    /* ── Neutral Scale ── */
    --color-slate-50:  #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;

    /* ── Typography ── */
    --font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: var(--font-family-sans);
    --font-sans: var(--font-family-sans);
    --font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', 'JetBrains Mono', monospace;

    --text-hero:    clamp(2rem, 1.68rem + 1.05vw, 2.5rem);
    --text-display: clamp(1.625rem, 1.4rem + 0.72vw, 2rem);
    --text-heading: clamp(1.25rem, 1.1rem + 0.46vw, 1.5rem);
    --text-title:   clamp(1rem, 0.94rem + 0.22vw, 1.125rem);
    --text-lg:      clamp(0.94rem, 0.91rem + 0.08vw, 1rem);
    --text-base:    clamp(0.84rem, 0.81rem + 0.08vw, 0.9rem);
    --text-sm:      clamp(0.76rem, 0.74rem + 0.05vw, 0.82rem);
    --text-xs:      clamp(0.68rem, 0.67rem + 0.04vw, 0.74rem);
    --text-2xs:     clamp(0.62rem, 0.61rem + 0.03vw, 0.68rem);

    --font-regular:  400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     600;
    --font-extrabold: 700;
    --font-black:    700;

    --leading-hero:    1.04;
    --leading-display: 1.12;
    --leading-heading: 1.24;
    --leading-body:    1.55;
    --leading-tight:   1.22;

    /* ── Spacing ── */
    --space-1:  4px;
    --space-2:  clamp(6px, 0.35vw, 8px);
    --space-3:  clamp(10px, 0.55vw, 12px);
    --space-4:  clamp(12px, 0.7vw, 16px);
    --space-5:  clamp(16px, 0.9vw, 20px);
    --space-6:  clamp(18px, 1vw, 24px);
    --space-7:  clamp(22px, 1.25vw, 28px);
    --space-8:  clamp(24px, 1.45vw, 32px);
    --space-10: clamp(32px, 1.9vw, 40px);
    --space-12: clamp(40px, 2.3vw, 48px);
    --space-16: clamp(52px, 3vw, 64px);

    /* ══════════════════════════════════════════════════════════════════
       WORKSPACE LAYOUT SYSTEM V2 — Full-width, Fluid, Professional
       Elimina sensacao de painel centralizado. Melhor aproveitamento.
       ══════════════════════════════════════════════════════════════════ */

    /* ── Page Constraints — Wider, more fluid ── */
    --page-max-width: 1600px;
    --page-max-width-wide: 1920px;
    --page-max-width-ultra: 2200px;
    --page-reading-width: 75ch;

    /* ── Page Padding — Reduced for workspace feel ── */
    --page-padding-inline: clamp(10px, 0.6vw + 6px, 20px);
    --page-padding-block: clamp(12px, 0.6vw + 8px, 20px);
    --page-padding-block-end: clamp(20px, 1.2vw + 12px, 36px);

    /* ── Section Gaps — Tighter, more connected ── */
    --page-section-gap: clamp(14px, 0.8vw + 8px, 22px);
    --page-section-gap-tight: clamp(10px, 0.5vw + 6px, 16px);

    /* ── Panel & Card Padding — More compact ── */
    --panel-padding: clamp(14px, 0.7vw + 8px, 20px);
    --panel-padding-compact: clamp(12px, 0.5vw + 7px, 16px);
    --card-padding: clamp(12px, 0.45vw + 8px, 16px);
    --card-padding-roomy: clamp(14px, 0.6vw + 9px, 18px);

    /* ── Grid System — Fluid gaps ── */
    --cluster-gap: clamp(8px, 0.5vw + 4px, 14px);
    --grid-gap: clamp(12px, 0.65vw + 6px, 18px);
    --grid-gap-wide: clamp(14px, 0.8vw + 8px, 22px);

    /* ── Controls — Slightly more compact ── */
    --control-height: clamp(36px, 0.25vw + 34px, 40px);
    --control-height-strong: clamp(38px, 0.35vw + 36px, 42px);
    --chip-height: clamp(28px, 0.25vw + 26px, 32px);
    --pill-height: clamp(32px, 0.3vw + 30px, 36px);

    /* ── Sidebar Rails — Workspace adapted ── */
    --sidebar-rail: 300px;
    --sidebar-rail-wide: 340px;
    --sidebar-rail-ultra: 380px;
    --hero-side-rail: 340px;
    --hero-side-rail-wide: 380px;
    --hero-side-rail-ultra: 420px;

    /* ── NEW: Workspace-specific tokens ── */
    --workspace-content-min: 680px;
    --workspace-sidebar-max: 400px;
    --workspace-main-gap: clamp(16px, 1vw + 8px, 28px);
    --workspace-inline-pad: clamp(8px, 0.5vw + 4px, 16px);

    /* ── Radius — Slightly tighter for workspace feel ── */
    --radius-container: clamp(16px, 0.5vw + 12px, 22px);
    --radius-card:      clamp(14px, 0.4vw + 10px, 18px);
    --radius-input:     clamp(10px, 0.3vw + 8px, 14px);
    --radius-sm:        clamp(8px, 0.2vw + 6px, 10px);
    --radius-pill:      9999px;
    --radius-md:        var(--radius-card);
    --radius-lg:        var(--radius-container);
    --radius-xl:        var(--radius-container);
    --radius-2xl:       var(--radius-container);
    --radius-full:      var(--radius-pill);

    /* ── Shadows ── */
    --shadow-xs:      0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm:      0 8px 18px rgba(16, 24, 40, 0.06);
    --shadow-md:      0 14px 32px rgba(16, 24, 40, 0.08);
    --shadow-lg:      0 24px 56px rgba(16, 24, 40, 0.12);
    --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.65);
    --shadow-xl:      var(--shadow-lg);
    --shadow-premium: 0 32px 72px rgba(16, 24, 40, 0.14);

    /* ── Focus / Motion ── */
    --focus-ring:        0 0 0 3px rgba(31, 111, 214, 0.16);
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.2s ease;
    --transition-medium: all 0.32s cubic-bezier(0.22, 1, 0.36, 1);

    /* ── Z-index ── */
    --z-base:    1;
    --z-above:   10;
    --z-filters: 50;
    --z-overlay: 70;
    --z-modal:   90;
    --z-toast:   100;

    /* ── Shell Tokens ── */
    --shell-app-bg:
        radial-gradient(circle at top left, rgba(0, 75, 152, 0.12), transparent 24%),
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.76), transparent 18%),
        radial-gradient(circle at bottom right, rgba(237, 86, 0, 0.11), transparent 20%),
        linear-gradient(180deg, #F8FAFC 0%, #EEF3F8 46%, #E9EFF6 100%);
    --shell-sidebar-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(248, 250, 252, 0.66) 52%, rgba(243, 247, 251, 0.72) 100%);
    --shell-sidebar-border: rgba(255, 255, 255, 0.48);
    --shell-sidebar-surface: rgba(255, 255, 255, 0.56);
    --shell-sidebar-surface-strong: rgba(255, 255, 255, 0.84);
    --shell-floating-bg: rgba(255, 255, 255, 0.74);
    --shell-topbar-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.58) 100%);
    --shell-topbar-border: rgba(255, 255, 255, 0.52);
    --shell-chrome-bg: rgba(255, 255, 255, 0.58);
    --shell-chrome-bg-strong: rgba(255, 255, 255, 0.84);
    --shell-chrome-border: rgba(255, 255, 255, 0.54);
    --shell-chrome-border-subtle: rgba(15, 23, 42, 0.09);
    --shell-chrome-shadow:
        0 24px 54px rgba(15, 23, 42, 0.12),
        0 10px 22px rgba(15, 23, 42, 0.05);
    --shell-topbar-shadow:
        0 18px 42px rgba(15, 23, 42, 0.10),
        0 8px 18px rgba(15, 23, 42, 0.04);
    --shell-bridge-glow: linear-gradient(90deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0));

    --menu-text: #0F172A;
    --menu-text-muted: #64748B;
    --menu-text-soft: #94A3B8;
    --menu-surface: rgba(255, 255, 255, 0.68);
    --menu-surface-strong: rgba(255, 255, 255, 0.88);
    --menu-surface-muted: rgba(241, 245, 249, 0.92);
    --menu-border: rgba(15, 23, 42, 0.08);
    --menu-border-strong: rgba(15, 23, 42, 0.14);
    --menu-divider: rgba(15, 23, 42, 0.08);
    --menu-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
    --menu-shadow-strong: 0 28px 64px rgba(15, 23, 42, 0.16);
    --menu-focus-ring: 0 0 0 3px rgba(31, 111, 214, 0.18);
    --menu-icon-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 247, 250, 0.92));
    --menu-icon-border: rgba(15, 23, 42, 0.08);
    --menu-icon-color: #37516f;
    --menu-item-hover:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 241, 254, 0.86));
    --menu-item-hover-border: rgba(31, 111, 214, 0.16);
    --menu-item-hover-shadow: 0 16px 28px rgba(15, 23, 42, 0.10);
    --menu-item-active-bg:
        linear-gradient(135deg, rgba(11, 87, 208, 0.14), rgba(237, 86, 0, 0.10));
    --menu-item-active-border: rgba(11, 87, 208, 0.20);
    --menu-item-active-text: #0B3F7E;
    --menu-item-active-muted: #1F5FAE;
    --menu-item-active-marker: linear-gradient(180deg, #ED5600 0%, #FF8A3D 100%);
    --menu-item-active-shadow: 0 18px 34px rgba(31, 111, 214, 0.14);
    --menu-item-disabled-text: rgba(100, 116, 139, 0.64);
    --menu-item-expanded-bg:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    --menu-badge-bg: rgba(255, 244, 229, 0.95);
    --menu-badge-border: rgba(229, 137, 30, 0.22);
    --menu-badge-text: #9A4F12;
    --menu-tooltip-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 251, 0.98));
    --menu-tooltip-border: rgba(15, 23, 42, 0.10);
    --menu-tooltip-text: #0F172A;
    --menu-palette-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 248, 251, 0.97));
    --menu-palette-search-bg: rgba(255, 255, 255, 0.92);
    --menu-palette-item-bg: rgba(255, 255, 255, 0.92);
    --menu-palette-item-hover-bg: rgba(248, 250, 252, 0.98);
    --menu-palette-item-current-bg: rgba(232, 241, 254, 0.96);
    --menu-palette-item-disabled-bg: rgba(248, 250, 252, 0.82);
    --menu-palette-item-current-text: #0B5ED7;
    --menu-palette-item-disabled-text: #94A3B8;
    --menu-bottom-nav-bg: rgba(255, 255, 255, 0.94);
    --menu-bottom-nav-border: rgba(15, 23, 42, 0.08);
    --menu-bottom-nav-item-text: #64748B;
    --menu-bottom-nav-item-active-text: #0F172A;
    --menu-bottom-nav-item-active-bg:
        linear-gradient(135deg, rgba(11, 87, 208, 0.14), rgba(237, 86, 0, 0.10));

    --dropdown-menu-bg: rgba(255, 255, 255, 0.98);
    --dropdown-menu-border: rgba(15, 23, 42, 0.10);
    --dropdown-menu-shadow: 0 24px 48px rgba(15, 23, 42, 0.14);
    --dropdown-menu-item-hover: rgba(243, 246, 250, 0.95);
    --dropdown-menu-item-selected: rgba(232, 241, 254, 0.92);
    --dropdown-menu-item-selected-text: #0B3F7E;

    /* ── Table Tokens ── */
    --table-shell-bg: rgba(255, 255, 255, 0.94);
    --table-shell-border: rgba(15, 23, 42, 0.10);
    --table-header-bg: rgba(255, 255, 255, 0.94);
    --table-header-secondary-bg: #F8FAFC;
    --table-group-id-bg: linear-gradient(180deg, #EEF5FF 0%, #E6F0FF 100%);
    --table-group-neutral-bg: linear-gradient(180deg, #F8FAFC 0%, #F3F6F9 100%);
    --table-group-money-bg: linear-gradient(180deg, #EFF6FF 0%, #E8F1FE 100%);
    --table-group-positive-bg: linear-gradient(180deg, #ECFDF3 0%, #E4F8EF 100%);
    --table-group-warning-bg: linear-gradient(180deg, #FFF5E8 0%, #FFF0DB 100%);
    --table-row-odd: rgba(248, 250, 252, 0.72);
    --table-row-even: rgba(243, 246, 250, 0.92);
    --table-row-hover: rgba(230, 238, 249, 0.92);
    --table-sticky-odd: #EFF4FA;
    --table-sticky-even: #E8EFF7;
    --table-sticky-hover: #DDE8F5;
    --table-selected: #DCE9FA;
    --table-text: #334155;
    --table-text-strong: #0F172A;
    --table-text-muted: #64748B;

    /* ── Gradients ── */
    --gradient-premium-bg:
        radial-gradient(circle at top left, rgba(0, 75, 152, 0.05), transparent 28%),
        radial-gradient(circle at top right, rgba(237, 86, 0, 0.035), transparent 24%),
        linear-gradient(180deg, #FAFBFC 0%, #F2F5F9 100%);
    --gradient-hero-light:
        radial-gradient(circle at top left, rgba(0, 75, 152, 0.10), transparent 34%),
        radial-gradient(circle at bottom right, rgba(237, 86, 0, 0.06), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 251, 0.98));
    --gradient-hero-dark:
        radial-gradient(circle at top left, rgba(55, 111, 255, 0.22), transparent 34%),
        radial-gradient(circle at bottom right, rgba(237, 86, 0, 0.16), transparent 28%),
        linear-gradient(135deg, #101826 0%, #162033 54%, #1A2437 100%);
    --gradient-sidebar: var(--shell-sidebar-bg);
}

[data-mode="dark"] {
    /* ══════════════════════════════════════════════════════════════════
       DARK MODE V2 — Vibrant & Modern
       Inspired by modern design systems with richer colors and depth
       ══════════════════════════════════════════════════════════════════ */

    /* ── Core Backgrounds — Rich dark with subtle blue undertones ── */
    --color-background:         #080B12;
    --color-background-elevated:#0D1117;
    --color-surface:            rgba(13, 17, 23, 0.98);
    --color-surface-alt:        #0F141C;
    --color-surface-soft:       #131A24;
    --color-surface-raised:     #161D2A;
    --color-surface-secondary:  #1A2332;
    --color-surface-muted:      #0E1319;

    /* ── Text — Higher contrast with warm undertones ── */
    --color-text:               #F0F6FC;
    --color-text-primary:       #F0F6FC;
    --color-text-secondary:     #B8C5D6;
    --color-text-muted:         #8B99AD;
    --color-text-tertiary:      #5C6B7F;

    /* ── Borders — Subtle glow effects ── */
    --color-border:             rgba(99, 140, 200, 0.12);
    --color-border-strong:      rgba(99, 140, 200, 0.22);
    --color-border-light:       rgba(99, 140, 200, 0.08);

    /* ── Semantic Soft Colors — More vibrant and saturated ── */
    --color-primary:            #3B82F6;
    --color-primary-soft:       rgba(59, 130, 246, 0.20);
    --color-accent:             #FF6B2C;
    --color-accent-soft:        rgba(255, 107, 44, 0.18);
    --color-success:            #22C55E;
    --color-success-soft:       rgba(34, 197, 94, 0.20);
    --color-warning:            #F59E0B;
    --color-warning-soft:       rgba(245, 158, 11, 0.20);
    --color-danger:             #EF4444;
    --color-danger-soft:        rgba(239, 68, 68, 0.20);
    --color-info:               #06B6D4;
    --color-info-soft:          rgba(6, 182, 212, 0.20);
    --color-teal:               #14B8A6;
    --color-teal-soft:          rgba(20, 184, 166, 0.20);

    /* ── Shadows — Deeper with colored ambient light ── */
    --shadow-xs:      0 2px 4px rgba(0, 0, 0, 0.32), 0 0 1px rgba(59, 130, 246, 0.06);
    --shadow-sm:      0 12px 28px rgba(0, 0, 0, 0.36), 0 0 1px rgba(59, 130, 246, 0.08);
    --shadow-md:      0 20px 44px rgba(0, 0, 0, 0.44), 0 0 2px rgba(59, 130, 246, 0.10);
    --shadow-lg:      0 32px 72px rgba(0, 0, 0, 0.52), 0 0 3px rgba(59, 130, 246, 0.12);
    --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --shadow-premium: 0 40px 90px rgba(0, 0, 0, 0.58), 0 0 4px rgba(59, 130, 246, 0.15);
    --shadow-glow-primary: 0 0 40px rgba(59, 130, 246, 0.25);
    --shadow-glow-accent: 0 0 40px rgba(255, 107, 44, 0.25);

    /* ── Focus — Vibrant blue glow ── */
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35), 0 0 16px rgba(59, 130, 246, 0.20);

    /* ── Shell — Rich gradients with subtle color accents ── */
    --shell-app-bg:
        radial-gradient(ellipse 80% 50% at 0% 0%, rgba(59, 130, 246, 0.15), transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(139, 92, 246, 0.10), transparent 40%),
        radial-gradient(ellipse 50% 50% at 100% 100%, rgba(255, 107, 44, 0.08), transparent 45%),
        linear-gradient(180deg, #080B12 0%, #0D1117 50%, #0F141C 100%);
    --shell-sidebar-bg:
        linear-gradient(180deg, 
            rgba(13, 17, 23, 0.95) 0%, 
            rgba(15, 20, 28, 0.92) 50%, 
            rgba(17, 22, 32, 0.95) 100%);
    --shell-sidebar-border: rgba(59, 130, 246, 0.10);
    --shell-sidebar-surface: rgba(255, 255, 255, 0.04);
    --shell-sidebar-surface-strong: rgba(255, 255, 255, 0.08);
    --shell-topbar-bg:
        linear-gradient(180deg, rgba(13, 17, 23, 0.92) 0%, rgba(13, 17, 23, 0.85) 100%);
    --shell-topbar-border: rgba(59, 130, 246, 0.08);
    --shell-floating-bg: rgba(13, 17, 23, 0.95);
    --shell-chrome-bg: rgba(13, 17, 23, 0.88);
    --shell-chrome-bg-strong: rgba(15, 20, 28, 0.95);
    --shell-chrome-border: rgba(99, 140, 200, 0.12);
    --shell-chrome-border-subtle: rgba(99, 140, 200, 0.08);
    --shell-chrome-shadow:
        0 32px 72px rgba(0, 0, 0, 0.45),
        0 12px 28px rgba(0, 0, 0, 0.28),
        0 0 1px rgba(59, 130, 246, 0.15);
    --shell-topbar-shadow:
        0 20px 52px rgba(0, 0, 0, 0.35),
        0 8px 20px rgba(0, 0, 0, 0.22);
    --shell-bridge-glow: linear-gradient(90deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.08), transparent);

    /* ── Menu — Modern glass-like surfaces ── */
    --menu-text: #F0F6FC;
    --menu-text-muted: #9BADC4;
    --menu-text-soft: #6B7D93;
    --menu-surface: rgba(255, 255, 255, 0.03);
    --menu-surface-strong: rgba(255, 255, 255, 0.06);
    --menu-surface-muted: rgba(13, 17, 23, 0.95);
    --menu-border: rgba(99, 140, 200, 0.12);
    --menu-border-strong: rgba(99, 140, 200, 0.20);
    --menu-divider: rgba(99, 140, 200, 0.08);
    --menu-shadow: 0 24px 52px rgba(0, 0, 0, 0.38), 0 0 1px rgba(59, 130, 246, 0.12);
    --menu-shadow-strong: 0 32px 76px rgba(0, 0, 0, 0.52), 0 0 2px rgba(59, 130, 246, 0.15);
    --menu-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.30);
    --menu-icon-bg: linear-gradient(145deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.08));
    --menu-icon-border: rgba(99, 140, 200, 0.15);
    --menu-icon-color: #B8C5D6;

    /* ── Menu Item States — Vibrant hover and active states ── */
    --menu-item-hover:
        linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.08));
    --menu-item-hover-border: rgba(59, 130, 246, 0.25);
    --menu-item-hover-shadow: 0 18px 36px rgba(0, 0, 0, 0.32), 0 0 16px rgba(59, 130, 246, 0.08);
    --menu-item-active-bg:
        linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(255, 107, 44, 0.12));
    --menu-item-active-border: rgba(59, 130, 246, 0.35);
    --menu-item-active-text: #FFFFFF;
    --menu-item-active-muted: rgba(255, 255, 255, 0.88);
    --menu-item-active-marker: linear-gradient(180deg, #FF8A3D 0%, #FF6B2C 100%);
    --menu-item-active-shadow: 
        0 20px 40px rgba(59, 130, 246, 0.18),
        0 0 24px rgba(255, 107, 44, 0.10);
    --menu-item-disabled-text: rgba(139, 153, 173, 0.45);
    --menu-item-expanded-bg:
        linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(139, 92, 246, 0.04));

    /* ── Menu Badges — Vibrant accent colors ── */
    --menu-badge-bg: rgba(255, 107, 44, 0.15);
    --menu-badge-border: rgba(255, 140, 80, 0.35);
    --menu-badge-text: #FFB088;

    /* ── Menu Tooltips & Palette — Deep glass effect ── */
    --menu-tooltip-bg:
        linear-gradient(180deg, rgba(13, 17, 23, 0.98), rgba(15, 20, 28, 0.96));
    --menu-tooltip-border: rgba(99, 140, 200, 0.18);
    --menu-tooltip-text: #E1E8F0;
    --menu-palette-bg:
        linear-gradient(180deg, rgba(13, 17, 23, 0.99), rgba(15, 20, 28, 0.98));
    --menu-palette-search-bg: rgba(8, 11, 18, 0.95);
    --menu-palette-item-bg: rgba(13, 17, 23, 0.85);
    --menu-palette-item-hover-bg: rgba(59, 130, 246, 0.12);
    --menu-palette-item-current-bg: rgba(59, 130, 246, 0.18);
    --menu-palette-item-disabled-bg: rgba(13, 17, 23, 0.60);
    --menu-palette-item-current-text: #93C5FD;
    --menu-palette-item-disabled-text: #5C6B7F;

    /* ── Bottom Navigation — Rich dark with accents ── */
    --menu-bottom-nav-bg: rgba(8, 11, 18, 0.98);
    --menu-bottom-nav-border: rgba(59, 130, 246, 0.10);
    --menu-bottom-nav-item-text: rgba(255, 255, 255, 0.50);
    --menu-bottom-nav-item-active-text: #FFFFFF;
    --menu-bottom-nav-item-active-bg:
        linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(255, 107, 44, 0.15));

    /* ── Dropdown Menus — Glass-like with depth ── */
    --dropdown-menu-bg: rgba(13, 17, 23, 0.98);
    --dropdown-menu-border: rgba(99, 140, 200, 0.18);
    --dropdown-menu-shadow: 0 28px 56px rgba(0, 0, 0, 0.50), 0 0 1px rgba(59, 130, 246, 0.12);
    --dropdown-menu-item-hover: rgba(59, 130, 246, 0.12);
    --dropdown-menu-item-selected: rgba(59, 130, 246, 0.18);
    --dropdown-menu-item-selected-text: #93C5FD;

    /* ── Tables — Rich contrast with subtle accents ── */
    --table-shell-bg: rgba(13, 17, 23, 0.96);
    --table-shell-border: rgba(99, 140, 200, 0.12);
    --table-header-bg: rgba(15, 20, 28, 0.98);
    --table-header-secondary-bg: rgba(19, 26, 38, 0.98);
    --table-group-id-bg: linear-gradient(180deg, rgba(30, 58, 95, 0.85) 0%, rgba(22, 44, 72, 0.92) 100%);
    --table-group-neutral-bg: linear-gradient(180deg, rgba(22, 28, 40, 0.95) 0%, rgba(17, 22, 32, 0.98) 100%);
    --table-group-money-bg: linear-gradient(180deg, rgba(20, 55, 100, 0.85) 0%, rgba(15, 42, 78, 0.92) 100%);
    --table-group-positive-bg: linear-gradient(180deg, rgba(12, 74, 58, 0.90) 0%, rgba(10, 55, 45, 0.95) 100%);
    --table-group-warning-bg: linear-gradient(180deg, rgba(120, 60, 12, 0.88) 0%, rgba(85, 45, 10, 0.94) 100%);
    --table-row-odd: rgba(13, 17, 23, 0.88);
    --table-row-even: rgba(17, 22, 32, 0.95);
    --table-row-hover: rgba(59, 130, 246, 0.08);
    --table-sticky-odd: rgba(17, 22, 32, 0.98);
    --table-sticky-even: rgba(20, 26, 38, 0.98);
    --table-sticky-hover: rgba(59, 130, 246, 0.12);
    --table-selected: rgba(59, 130, 246, 0.18);
    --table-text: #C4D1E0;
    --table-text-strong: #F0F6FC;
    --table-text-muted: #8B99AD;

    /* ── Gradients — Rich and vibrant ── */
    --gradient-premium-bg:
        radial-gradient(ellipse 100% 60% at 0% 0%, rgba(59, 130, 246, 0.12), transparent 45%),
        radial-gradient(ellipse 80% 50% at 100% 20%, rgba(139, 92, 246, 0.08), transparent 40%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(255, 107, 44, 0.06), transparent 35%),
        linear-gradient(180deg, #080B12 0%, #0D1117 60%, #0F141C 100%);
    --gradient-hero-light:
        radial-gradient(ellipse 70% 50% at 20% 20%, rgba(59, 130, 246, 0.15), transparent 50%),
        radial-gradient(ellipse 50% 40% at 80% 80%, rgba(255, 107, 44, 0.10), transparent 45%),
        linear-gradient(135deg, rgba(15, 20, 28, 0.98), rgba(13, 17, 23, 0.98));
    --gradient-hero-dark:
        radial-gradient(ellipse 80% 60% at 10% 10%, rgba(59, 130, 246, 0.22), transparent 45%),
        radial-gradient(ellipse 60% 50% at 90% 90%, rgba(255, 107, 44, 0.15), transparent 40%),
        linear-gradient(135deg, #0D1117 0%, #131A24 50%, #161D2A 100%);
    --gradient-sidebar: var(--shell-sidebar-bg);

    /* ── Brand Colors Override for Dark Mode ── */
    --brand-blue-light: #60A5FA;
    --brand-orange-light: #FF8C57;
    --brand-teal-light: #2DD4BF;
}

/* ── Breakpoint-Responsive Layout Scale ── */
@media (min-width: 640px) {
    :root {
        --page-padding-inline: clamp(14px, 1.2vw + 6px, 24px);
        --panel-padding: clamp(14px, 0.7vw + 8px, 20px);
    }
}

@media (min-width: 768px) {
    :root {
        --page-padding-inline: clamp(16px, 1.4vw + 8px, 26px);
        --grid-gap: clamp(14px, 0.85vw + 8px, 24px);
        --control-height: clamp(40px, 0.35vw + 38px, 44px);
    }
}

@media (min-width: 1024px) {
    :root {
        --page-max-width: 1440px;
        --page-padding-inline: clamp(16px, 1vw + 8px, 28px);
        --page-section-gap: clamp(16px, 0.85vw + 10px, 26px);
        --panel-padding: clamp(16px, 0.75vw + 10px, 22px);
    }
}

@media (min-width: 1280px) {
    :root {
        --page-max-width: 1520px;
        --page-padding-inline: clamp(18px, 1vw + 8px, 30px);
        --page-section-gap: clamp(18px, 0.9vw + 12px, 30px);
        --grid-gap: clamp(16px, 0.9vw + 10px, 26px);
        --card-padding: clamp(14px, 0.6vw + 10px, 20px);
    }
}

@media (min-width: 1536px) {
    :root {
        --page-max-width: var(--page-max-width-wide);
        --sidebar-rail: var(--sidebar-rail-wide);
        --hero-side-rail: var(--hero-side-rail-wide);
        --panel-padding: clamp(16px, 0.7vw + 10px, 22px);
        --card-padding-roomy: clamp(16px, 0.75vw + 10px, 20px);
        --grid-gap-wide: clamp(20px, 1.1vw + 12px, 32px);
    }
}

@media (min-width: 1920px) {
    :root {
        --page-max-width: var(--page-max-width-ultra);
        --sidebar-rail: var(--sidebar-rail-ultra);
        --hero-side-rail: var(--hero-side-rail-ultra);
        --page-reading-width: 76ch;
        --page-padding-inline: clamp(22px, 1vw + 10px, 34px);
        --page-section-gap: clamp(22px, 1vw + 14px, 36px);
    }
}

/* ── Density Adaptive Scale (Ultrawide Protection) ── */
@media (min-width: 2560px) {
    :root {
        --page-max-width: 2100px;
        --page-padding-inline: clamp(28px, 0.8vw + 16px, 48px);
        --panel-padding: clamp(18px, 0.6vw + 12px, 26px);
        --text-hero: clamp(2.2rem, 1.4rem + 0.8vw, 2.8rem);
        --text-display: clamp(1.7rem, 1.2rem + 0.5vw, 2.2rem);
    }
}

@media (min-width: 3440px) {
    :root {
        --page-max-width: 2400px;
        --page-padding-inline: clamp(36px, 0.6vw + 20px, 64px);
    }
}