/* ═══════════════════════════════════════════════════════════════════════════════ Theme System — 8 themes x light/dark = 16 combos Applied via ═══════════════════════════════════════════════════════════════════════════════ */ /* ─── 1. Midnight Premium — Light ─────────────────────────────────────────────── */ [data-theme="midnight"][data-mode="light"], :root { color-scheme: light; /* Base surfaces */ --base: #F8FAFC; --surface: #ffffff; --card-bg: #ffffff; /* Text */ --ink: #0F172A; --ink-muted: #64748B; --border-ink: #0F172A; --color-label: #94A3B8; --color-value: #0F172A; --color-title: #334155; /* Primary brand */ --primary: #2563EB; --primary-soft: #EFF6FF; --blue: #2563EB; --blue-dark: #1D4ED8; --blue-main: #2563EB; --blue-light: #3B82F6; --blue-soft: #EFF6FF; /* Status */ --color-positive: #16A34A; --color-negative: #EF4444; /* Domain accents */ --accent-bank: #2563EB; --accent-bank-bg: #EFF6FF; --accent-invest: #059669; --accent-invest-bg: #ECFDF5; --accent-re: #D97706; --accent-re-bg: #FFFBEB; --accent-loan: #DC2626; --accent-loan-bg: #FEF2F2; --accent-rsu: #EC4899; --accent-rsu-bg: #FDF2F8; --accent-pension: #7C3AED; --accent-pension-bg: #F5F3FF; --accent-insurance: #0891B2; --accent-insurance-bg:#ECFEFF; --accent-crypto: #F7931A; --accent-crypto-bg: #FFF7ED; --accent-vehicles: #D97706; --accent-vehicles-bg: #FFFBEB; --accent-employer: #2563EB; --accent-employer-bg: #EFF6FF; /* Semantic status backgrounds */ --status-success-bg: #DCFCE7; --status-success-ink: #065F46; --status-warning-bg: #FEF9C3; --status-warning-ink: #92400E; --status-error-bg: #FEF2F2; --status-error-ink: #991B1B; --status-info-bg: #DBEAFE; --status-info-ink: #1E40AF; /* Tooltip */ --tooltip-bg: #1E293B; --tooltip-ink: #F1F5F9; --tooltip-muted: #94A3B8; --tooltip-accent: #4ADE80; --tooltip-border: rgba(255,255,255,0.15); /* Neutrals */ --gray-50: #F8F8F8; --gray-100: #F2F2F2; --gray-200: #E0E0E0; --gray-300: #D1D5DB; --gray-400: #AAAAAA; --gray-500: #888888; --gray-600: #555555; --gray-700: #333333; --gray-800: #111111; --white: #ffffff; /* Borders & shadows */ --border-std: rgba(0,0,0,0.065); --color-muted-border: #F3F4F6; --card-border: 1px solid rgba(0,0,0,0.065); --shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04); --shadow-md: 0 2px 8px rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.09); --shadow-hover: 0 0 0 1.5px var(--blue); --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.25); /* Sidebar */ --sidebar-bg: #ffffff; --sidebar-ink: var(--ink); --sidebar-ink-muted: var(--ink-muted); --sidebar-border: rgba(0,0,0,0.08); --sidebar-active-bg: var(--blue-soft); --sidebar-active-ink: var(--blue); --sidebar-hover-bg: var(--gray-50); /* Chart */ --chart-border: #F0F4FF; /* Misc semantic */ --drawer-header-bg: var(--ink); --drawer-header-ink: #ffffff; --overlay-bg: rgba(0,0,0,0.5); --input-bg: #ffffff; --badge-bank-bg: #EFF6FF; --badge-bank-ink: #1D4ED8; --badge-credit-bg: #FFF7ED; --badge-credit-ink: #C2410C; /* Dashboard structural */ --hero-bg: var(--card-bg); --hero-ink: var(--color-value); --hero-label-ink: var(--ink-muted); --hero-sub-ink: var(--color-label); --hero-border: 1px solid var(--border-std); --hero-shadow: 0 0 30px rgba(59,130,246,0.06); --dash-card-accent-h: 0px; --dash-card-shadow: none; --radius: 16px; /* Page-level structural (extends dashboard pattern to all pages) */ --page-hero-bg: var(--card-bg); --page-hero-ink: var(--color-value); --page-hero-label-ink: var(--ink-muted); --page-hero-border: 1px solid var(--border-std); --page-hero-shadow: var(--shadow); --card-accent-h: 0px; --table-header-bg: var(--gray-50); --table-radius: var(--radius); --btn-radius: 12px; --input-radius: 10px; --radius-pill: 20px; } /* ─── Dark mode fallback — semantic status & tooltip colors for all dark themes ── */ [data-mode="dark"] { --status-success-bg: rgba(22,163,74,0.15); --status-success-ink: #34D399; --status-warning-bg: rgba(217,119,6,0.15); --status-warning-ink: #FBBF24; --status-error-bg: rgba(239,68,68,0.15); --status-error-ink: #F87171; --status-info-bg: rgba(59,130,246,0.15); --status-info-ink: #60A5FA; --tooltip-bg: #0F172A; --tooltip-ink: #F1F5F9; --tooltip-muted: #64748B; --tooltip-accent: #4ADE80; --tooltip-border: rgba(255,255,255,0.1); } /* ─── 2. Midnight Premium — Dark ──────────────────────────────────────────────── */ [data-theme="midnight"][data-mode="dark"] { color-scheme: dark; --base: #0F172A; --surface: #1E293B; --card-bg: #1E293B; --ink: #F1F5F9; --ink-muted: #94A3B8; --border-ink: #94A3B8; --color-label: #64748B; --color-value: #F1F5F9; --color-title: #CBD5E1; --primary: #3B82F6; --primary-soft: rgba(59,130,246,0.15); --blue: #3B82F6; --blue-dark: #2563EB; --blue-main: #3B82F6; --blue-light: #60A5FA; --blue-soft: rgba(59,130,246,0.15); --color-positive: #34D399; --color-negative: #F87171; --accent-bank: #38BDF8; --accent-bank-bg: rgba(56,189,248,0.12); --accent-invest: #34D399; --accent-invest-bg: rgba(52,211,153,0.12); --accent-re: #FBBF24; --accent-re-bg: rgba(251,191,36,0.12); --accent-loan: #FB7185; --accent-loan-bg: rgba(251,113,133,0.12); --accent-rsu: #F472B6; --accent-rsu-bg: rgba(244,114,182,0.12); --accent-pension: #A78BFA; --accent-pension-bg: rgba(167,139,250,0.12); --accent-insurance: #22D3EE; --accent-insurance-bg:rgba(34,211,238,0.12); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #FBBF24; --accent-vehicles-bg: rgba(251,191,36,0.12); --gray-50: #1E293B; --gray-100: #334155; --gray-200: #475569; --gray-300: #64748B; --gray-400: #94A3B8; --gray-500: #CBD5E1; --gray-600: #E2E8F0; --gray-700: #F1F5F9; --gray-800: #F8FAFC; --white: #1E293B; --border-std: rgba(255,255,255,0.08); --color-muted-border: rgba(255,255,255,0.06); --card-border: 1px solid rgba(255,255,255,0.08); --shadow: 0 1px 4px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.2); --shadow-md: 0 2px 8px rgba(0,0,0,0.25), 0 12px 32px rgba(0,0,0,0.3); --shadow-hover: 0 0 0 1.5px var(--blue); --focus-ring: 0 0 0 3px rgba(59,130,246,0.35); --sidebar-bg: #1E293B; --sidebar-ink: #F1F5F9; --sidebar-ink-muted: #94A3B8; --sidebar-border: rgba(255,255,255,0.08); --sidebar-active-bg: rgba(59,130,246,0.15); --sidebar-active-ink: #60A5FA; --sidebar-hover-bg: rgba(255,255,255,0.05); --chart-border: #1E293B; --drawer-header-bg: #0F172A; --drawer-header-ink: #F1F5F9; --overlay-bg: rgba(0,0,0,0.6); --input-bg: #334155; --badge-bank-bg: rgba(56,189,248,0.15); --badge-bank-ink: #38BDF8; --badge-credit-bg: rgba(251,191,36,0.15); --badge-credit-ink: #FBBF24; /* Dashboard structural */ --hero-bg: var(--card-bg); --hero-ink: var(--color-value); --hero-label-ink: var(--ink-muted); --hero-sub-ink: var(--color-label); --hero-border: 1px solid var(--border-std); --hero-shadow: 0 0 30px rgba(59,130,246,0.1); --dash-card-accent-h: 0px; --dash-card-shadow: none; --radius: 16px; /* Page-level structural */ --page-hero-bg: var(--card-bg); --page-hero-ink: var(--color-value); --page-hero-label-ink: var(--ink-muted); --page-hero-border: 1px solid var(--border-std); --page-hero-shadow: var(--shadow); --card-accent-h: 0px; --table-header-bg: var(--gray-50); --table-radius: var(--radius); --btn-radius: 12px; --input-radius: 10px; --radius-pill: 20px; } /* ─── 3. Soft Gradient — Light ────────────────────────────────────────────────── */ [data-theme="gradient"][data-mode="light"] { color-scheme: light; --base: #FAFAF9; --surface: #ffffff; --card-bg: #ffffff; --ink: #1C1917; --ink-muted: #57534E; --border-ink: #1C1917; --color-label: #A8A29E; --color-value: #1C1917; --color-title: #44403C; --primary: #6366F1; --primary-soft: rgba(99,102,241,0.08); --blue: #6366F1; --blue-dark: #4F46E5; --blue-main: #6366F1; --blue-light: #818CF8; --blue-soft: rgba(99,102,241,0.08); --color-positive: #16A34A; --color-negative: #DC2626; --accent-bank: #0EA5E9; --accent-bank-bg: rgba(14,165,233,0.08); --accent-invest: #10B981; --accent-invest-bg: rgba(16,185,129,0.08); --accent-re: #F59E0B; --accent-re-bg: rgba(245,158,11,0.08); --accent-loan: #EF4444; --accent-loan-bg: rgba(239,68,68,0.08); --accent-rsu: #EC4899; --accent-rsu-bg: rgba(236,72,153,0.08); --accent-pension: #8B5CF6; --accent-pension-bg: rgba(139,92,246,0.08); --accent-insurance: #06B6D4; --accent-insurance-bg:rgba(6,182,212,0.08); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #F59E0B; --accent-vehicles-bg: rgba(245,158,11,0.08); --gray-50: #FAFAF9; --gray-100: #F5F5F4; --gray-200: #E7E5E4; --gray-300: #D6D3D1; --gray-400: #A8A29E; --gray-500: #78716C; --gray-600: #57534E; --gray-700: #44403C; --gray-800: #1C1917; --white: #ffffff; --border-std: rgba(0,0,0,0.06); --color-muted-border: #F5F5F4; --card-border: 1px solid rgba(0,0,0,0.06); --shadow: 0 4px 24px rgba(0,0,0,0.06); --shadow-md: 0 8px 40px rgba(0,0,0,0.1); --shadow-hover: 0 0 0 1.5px var(--blue); --focus-ring: 0 0 0 3px rgba(99,102,241,0.25); --sidebar-bg: #ffffff; --sidebar-ink: #1C1917; --sidebar-ink-muted: #57534E; --sidebar-border: rgba(0,0,0,0.06); --sidebar-active-bg: rgba(99,102,241,0.08); --sidebar-active-ink: #6366F1; --sidebar-hover-bg: #FAFAF9; --chart-border: #ffffff; --drawer-header-bg: #1C1917; --drawer-header-ink: #ffffff; --overlay-bg: rgba(0,0,0,0.5); --input-bg: #ffffff; --badge-bank-bg: rgba(14,165,233,0.1); --badge-bank-ink: #0284C7; --badge-credit-bg: rgba(245,158,11,0.1); --badge-credit-ink: #D97706; /* Dashboard structural */ --hero-bg: linear-gradient(135deg, #6366F1, #8B5CF6, #EC4899); --hero-ink: #ffffff; --hero-label-ink: rgba(255,255,255,0.85); --hero-sub-ink: rgba(255,255,255,0.7); --hero-border: none; --hero-shadow: 0 8px 32px rgba(99,102,241,0.25); --dash-card-accent-h: 3px; --dash-card-shadow: var(--shadow); --radius: 22px; /* Page-level structural */ --page-hero-bg: linear-gradient(135deg, #6366F1, #8B5CF6, #EC4899); --page-hero-ink: #ffffff; --page-hero-label-ink: rgba(255,255,255,0.85); --page-hero-border: none; --page-hero-shadow: 0 8px 32px rgba(99,102,241,0.25); --card-accent-h: 3px; --table-header-bg: var(--gray-50); --table-radius: 22px; --btn-radius: 22px; --input-radius: 14px; --radius-pill: 22px; } /* ─── 4. Soft Gradient — Dark ─────────────────────────────────────────────────── */ [data-theme="gradient"][data-mode="dark"] { color-scheme: dark; --base: #0C0A09; --surface: #1C1917; --card-bg: #1C1917; --ink: #FAFAF9; --ink-muted: #A8A29E; --border-ink: #A8A29E; --color-label: #78716C; --color-value: #FAFAF9; --color-title: #D6D3D1; --primary: #818CF8; --primary-soft: rgba(99,102,241,0.15); --blue: #818CF8; --blue-dark: #6366F1; --blue-main: #818CF8; --blue-light: #A5B4FC; --blue-soft: rgba(99,102,241,0.15); --color-positive: #34D399; --color-negative: #F87171; --accent-bank: #38BDF8; --accent-bank-bg: rgba(56,189,248,0.12); --accent-invest: #34D399; --accent-invest-bg: rgba(52,211,153,0.12); --accent-re: #FBBF24; --accent-re-bg: rgba(251,191,36,0.12); --accent-loan: #FB7185; --accent-loan-bg: rgba(251,113,133,0.12); --accent-rsu: #F9A8D4; --accent-rsu-bg: rgba(249,168,212,0.12); --accent-pension: #A78BFA; --accent-pension-bg: rgba(167,139,250,0.12); --accent-insurance: #22D3EE; --accent-insurance-bg:rgba(34,211,238,0.12); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #FBBF24; --accent-vehicles-bg: rgba(251,191,36,0.12); --gray-50: #1C1917; --gray-100: #292524; --gray-200: #44403C; --gray-300: #57534E; --gray-400: #A8A29E; --gray-500: #D6D3D1; --gray-600: #E7E5E4; --gray-700: #F5F5F4; --gray-800: #FAFAF9; --white: #1C1917; --border-std: rgba(255,255,255,0.06); --color-muted-border: rgba(255,255,255,0.05); --card-border: 1px solid rgba(255,255,255,0.06); --shadow: 0 4px 24px rgba(0,0,0,0.3); --shadow-md: 0 8px 40px rgba(0,0,0,0.4); --shadow-hover: 0 0 0 1.5px var(--blue); --focus-ring: 0 0 0 3px rgba(99,102,241,0.35); --sidebar-bg: #1C1917; --sidebar-ink: #FAFAF9; --sidebar-ink-muted: #A8A29E; --sidebar-border: rgba(255,255,255,0.06); --sidebar-active-bg: rgba(99,102,241,0.15); --sidebar-active-ink: #A5B4FC; --sidebar-hover-bg: rgba(255,255,255,0.05); --chart-border: #1C1917; --drawer-header-bg: #0C0A09; --drawer-header-ink: #FAFAF9; --overlay-bg: rgba(0,0,0,0.6); --input-bg: #292524; --badge-bank-bg: rgba(56,189,248,0.15); --badge-bank-ink: #38BDF8; --badge-credit-bg: rgba(251,191,36,0.15); --badge-credit-ink: #FBBF24; /* Dashboard structural */ --hero-bg: linear-gradient(135deg, #4F46E5, #6D28D9, #BE185D); --hero-ink: #ffffff; --hero-label-ink: rgba(255,255,255,0.8); --hero-sub-ink: rgba(255,255,255,0.6); --hero-border: none; --hero-shadow: 0 8px 32px rgba(79,70,229,0.3); --dash-card-accent-h: 3px; --dash-card-shadow: var(--shadow); --radius: 22px; /* Page-level structural */ --page-hero-bg: linear-gradient(135deg, #4F46E5, #6D28D9, #BE185D); --page-hero-ink: #ffffff; --page-hero-label-ink: rgba(255,255,255,0.8); --page-hero-border: none; --page-hero-shadow: 0 8px 32px rgba(79,70,229,0.3); --card-accent-h: 3px; --table-header-bg: var(--gray-50); --table-radius: 22px; --btn-radius: 22px; --input-radius: 14px; --radius-pill: 22px; } /* ─── 5. Quiet Luxury — Light ─────────────────────────────────────────────────── */ [data-theme="luxury"][data-mode="light"] { color-scheme: light; --base: #FFF8E7; --surface: #ffffff; --card-bg: #ffffff; --ink: #191919; --ink-muted: #666666; --border-ink: #191919; --color-label: #999999; --color-value: #191919; --color-title: #404040; --primary: #191919; --primary-soft: rgba(25,25,25,0.06); --blue: #191919; --blue-dark: #000000; --blue-main: #191919; --blue-light: #404040; --blue-soft: rgba(25,25,25,0.06); --color-positive: #37B887; --color-negative: #FB5977; --accent-bank: #37B887; --accent-bank-bg: rgba(55,184,135,0.08); --accent-invest: #CE6CFF; --accent-invest-bg: rgba(206,108,255,0.08); --accent-re: #191919; --accent-re-bg: rgba(25,25,25,0.06); --accent-loan: #FB5977; --accent-loan-bg: rgba(251,89,119,0.06); --accent-rsu: #999999; --accent-rsu-bg: rgba(153,153,153,0.08); --accent-pension: #CE6CFF; --accent-pension-bg: rgba(206,108,255,0.08); --accent-insurance: #51D7A4; --accent-insurance-bg:rgba(81,215,164,0.08); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #D4A574; --accent-vehicles-bg: rgba(212,165,116,0.08); --gray-50: #F8F6F1; --gray-100: #F0EDE5; --gray-200: #E0DDD5; --gray-300: #D0D0D0; --gray-400: #999999; --gray-500: #666666; --gray-600: #404040; --gray-700: #191919; --gray-800: #0A0A0A; --white: #ffffff; --border-std: rgba(25,25,25,0.12); --color-muted-border: #F0EDE5; --card-border: 1px solid rgba(25,25,25,0.12); --shadow: 0 2px 12px rgba(25,25,25,0.06); --shadow-md: 0 4px 24px rgba(25,25,25,0.1); --shadow-hover: 0 0 0 1.5px #191919; --focus-ring: 0 0 0 3px rgba(25,25,25,0.15); --sidebar-bg: #191919; --sidebar-ink: #F0EDE5; --sidebar-ink-muted: #999999; --sidebar-border: rgba(255,255,255,0.08); --sidebar-active-bg: rgba(255,255,255,0.1); --sidebar-active-ink: #ffffff; --sidebar-hover-bg: rgba(255,255,255,0.05); --chart-border: #ffffff; --drawer-header-bg: #191919; --drawer-header-ink: #F0EDE5; --overlay-bg: rgba(0,0,0,0.4); --input-bg: #ffffff; --badge-bank-bg: rgba(55,184,135,0.1); --badge-bank-ink: #2D9A6F; --badge-credit-bg: rgba(251,89,119,0.1); --badge-credit-ink: #E04060; /* Dashboard structural */ --hero-bg: var(--card-bg); --hero-ink: var(--color-value); --hero-label-ink: var(--ink-muted); --hero-sub-ink: var(--color-label); --hero-border: 1px solid var(--border-std); --hero-shadow: var(--shadow); --dash-card-accent-h: 0px; --dash-card-shadow: var(--shadow); --radius: 16px; /* Page-level structural */ --page-hero-bg: var(--card-bg); --page-hero-ink: var(--color-value); --page-hero-label-ink: var(--ink-muted); --page-hero-border: 1px solid var(--border-std); --page-hero-shadow: var(--shadow); --card-accent-h: 0px; --table-header-bg: var(--gray-50); --table-radius: 12px; --btn-radius: 8px; --input-radius: 8px; --radius-pill: 16px; } /* ─── 6. Quiet Luxury — Dark ──────────────────────────────────────────────────── */ [data-theme="luxury"][data-mode="dark"] { color-scheme: dark; --base: #1A1D21; --surface: #242830; --card-bg: #242830; --ink: #E5E5E5; --ink-muted: #AAAAAA; --border-ink: #AAAAAA; --color-label: #666666; --color-value: #E5E5E5; --color-title: #CCCCCC; --primary: #E5E5E5; --primary-soft: rgba(229,229,229,0.08); --blue: #E5E5E5; --blue-dark: #CCCCCC; --blue-main: #E5E5E5; --blue-light: #F5F5F5; --blue-soft: rgba(229,229,229,0.08); --color-positive: #4ADE80; --color-negative: #FB7185; --accent-bank: #4ADE80; --accent-bank-bg: rgba(74,222,128,0.1); --accent-invest: #D8B4FE; --accent-invest-bg: rgba(216,180,254,0.1); --accent-re: #E5E5E5; --accent-re-bg: rgba(229,229,229,0.08); --accent-loan: #FB7185; --accent-loan-bg: rgba(251,113,133,0.08); --accent-rsu: #666666; --accent-rsu-bg: rgba(102,102,102,0.1); --accent-pension: #D8B4FE; --accent-pension-bg: rgba(216,180,254,0.1); --accent-insurance: #5EEAD4; --accent-insurance-bg:rgba(94,234,212,0.1); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #D4A574; --accent-vehicles-bg: rgba(212,165,116,0.1); --gray-50: #242830; --gray-100: #2E323A; --gray-200: #3A3E48; --gray-300: #555555; --gray-400: #888888; --gray-500: #AAAAAA; --gray-600: #CCCCCC; --gray-700: #E5E5E5; --gray-800: #F5F5F5; --white: #242830; --border-std: rgba(255,255,255,0.1); --color-muted-border: rgba(255,255,255,0.06); --card-border: 1px solid rgba(255,255,255,0.1); --shadow: 0 2px 12px rgba(0,0,0,0.3); --shadow-md: 0 4px 24px rgba(0,0,0,0.4); --shadow-hover: 0 0 0 1.5px #AAAAAA; --focus-ring: 0 0 0 3px rgba(229,229,229,0.2); --sidebar-bg: #141618; --sidebar-ink: #E5E5E5; --sidebar-ink-muted: #888888; --sidebar-border: rgba(255,255,255,0.08); --sidebar-active-bg: rgba(255,255,255,0.08); --sidebar-active-ink: #ffffff; --sidebar-hover-bg: rgba(255,255,255,0.04); --chart-border: #242830; --drawer-header-bg: #141618; --drawer-header-ink: #E5E5E5; --overlay-bg: rgba(0,0,0,0.6); --input-bg: #2E323A; --badge-bank-bg: rgba(74,222,128,0.12); --badge-bank-ink: #4ADE80; --badge-credit-bg: rgba(251,113,133,0.12); --badge-credit-ink: #FB7185; /* Dashboard structural */ --hero-bg: var(--card-bg); --hero-ink: var(--color-value); --hero-label-ink: var(--ink-muted); --hero-sub-ink: var(--color-label); --hero-border: 1px solid var(--border-std); --hero-shadow: var(--shadow); --dash-card-accent-h: 0px; --dash-card-shadow: var(--shadow); --radius: 16px; /* Page-level structural */ --page-hero-bg: var(--card-bg); --page-hero-ink: var(--color-value); --page-hero-label-ink: var(--ink-muted); --page-hero-border: 1px solid var(--border-std); --page-hero-shadow: var(--shadow); --card-accent-h: 0px; --table-header-bg: var(--gray-50); --table-radius: 12px; --btn-radius: 8px; --input-radius: 8px; --radius-pill: 16px; } /* ─── 7. Nordic Frost — Light ───────────────────────────────────────────────── */ [data-theme="frost"][data-mode="light"] { color-scheme: light; --base: #F1F4F9; --surface: #ffffff; --card-bg: #ffffff; --ink: #0D1117; --ink-muted: #636E7B; --border-ink: #0D1117; --color-label: #8B95A3; --color-value: #0D1117; --color-title: #374151; --primary: #5770A0; --primary-soft: rgba(87,112,160,0.10); --blue: #5770A0; --blue-dark: #455D8A; --blue-main: #5770A0; --blue-light: #7B93C0; --blue-soft: rgba(87,112,160,0.10); --color-positive: #16A34A; --color-negative: #EF4444; --accent-bank: #5770A0; --accent-bank-bg: rgba(87,112,160,0.08); --accent-invest: #0D9488; --accent-invest-bg: rgba(13,148,136,0.08); --accent-re: #C88A2E; --accent-re-bg: rgba(200,138,46,0.08); --accent-loan: #DC2626; --accent-loan-bg: rgba(220,38,38,0.08); --accent-rsu: #B8860B; --accent-rsu-bg: rgba(184,134,11,0.08); --accent-pension: #7C6FC0; --accent-pension-bg: rgba(124,111,192,0.08); --accent-insurance: #0891B2; --accent-insurance-bg:rgba(8,145,178,0.08); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #B45309; --accent-vehicles-bg: rgba(180,83,9,0.08); --gray-50: #F7F8FA; --gray-100: #EDF0F5; --gray-200: #D8DDE6; --gray-300: #C1C8D4; --gray-400: #8B95A3; --gray-500: #636E7B; --gray-600: #4A5568; --gray-700: #2D3748; --gray-800: #0D1117; --white: #ffffff; --border-std: rgba(0,0,0,0.07); --color-muted-border: #EDF0F5; --card-border: 1px solid rgba(0,0,0,0.07); --shadow: 0 1px 3px rgba(87,112,160,0.06), 0 4px 16px rgba(87,112,160,0.04); --shadow-md: 0 4px 12px rgba(87,112,160,0.08), 0 12px 32px rgba(87,112,160,0.1); --shadow-hover: 0 0 0 1.5px var(--blue); --focus-ring: 0 0 0 3px rgba(87,112,160,0.25); --sidebar-bg: #ffffff; --sidebar-ink: var(--ink); --sidebar-ink-muted: var(--ink-muted); --sidebar-border: rgba(0,0,0,0.07); --sidebar-active-bg: rgba(87,112,160,0.10); --sidebar-active-ink: #5770A0; --sidebar-hover-bg: #F7F8FA; --chart-border: #F1F4F9; --drawer-header-bg: #0D1117; --drawer-header-ink: #ffffff; --overlay-bg: rgba(0,0,0,0.5); --input-bg: #ffffff; --badge-bank-bg: rgba(87,112,160,0.10); --badge-bank-ink: #455D8A; --badge-credit-bg: rgba(200,138,46,0.10); --badge-credit-ink: #A67320; /* Dashboard structural */ --hero-bg: var(--card-bg); --hero-ink: var(--color-value); --hero-label-ink: var(--ink-muted); --hero-sub-ink: var(--color-label); --hero-border: 1px solid var(--border-std); --hero-shadow: var(--shadow); --dash-card-accent-h: 0px; --dash-card-shadow: none; --radius: 16px; /* Page-level structural */ --page-hero-bg: var(--card-bg); --page-hero-ink: var(--color-value); --page-hero-label-ink: var(--ink-muted); --page-hero-border: 1px solid var(--border-std); --page-hero-shadow: var(--shadow); --card-accent-h: 0px; --table-header-bg: var(--gray-50); --table-radius: var(--radius); --btn-radius: 12px; --input-radius: 10px; --radius-pill: 20px; } /* ─── 8. Nordic Frost — Dark ────────────────────────────────────────────────── */ [data-theme="frost"][data-mode="dark"] { color-scheme: dark; --base: #0A0A0B; --surface: #14161A; --card-bg: #1A1D24; --ink: #E8ECF1; --ink-muted: #8B95A3; --border-ink: #8B95A3; --color-label: #636E7B; --color-value: #E8ECF1; --color-title: #B0BAC8; --primary: #7B93C0; --primary-soft: rgba(123,147,192,0.15); --blue: #7B93C0; --blue-dark: #5770A0; --blue-main: #7B93C0; --blue-light: #A3B5D6; --blue-soft: rgba(123,147,192,0.15); --color-positive: #34D399; --color-negative: #FB7185; --accent-bank: #7B93C0; --accent-bank-bg: rgba(123,147,192,0.12); --accent-invest: #2DD4BF; --accent-invest-bg: rgba(45,212,191,0.12); --accent-re: #F0C050; --accent-re-bg: rgba(240,192,80,0.10); --accent-loan: #FB7185; --accent-loan-bg: rgba(251,113,133,0.12); --accent-rsu: #F0C050; --accent-rsu-bg: rgba(240,192,80,0.10); --accent-pension: #A78BFA; --accent-pension-bg: rgba(167,139,250,0.12); --accent-insurance: #22D3EE; --accent-insurance-bg:rgba(34,211,238,0.12); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #FBBF24; --accent-vehicles-bg: rgba(251,191,36,0.10); --gray-50: #14161A; --gray-100: #1E2028; --gray-200: #2A2D38; --gray-300: #3A3E4A; --gray-400: #636E7B; --gray-500: #8B95A3; --gray-600: #B0BAC8; --gray-700: #D4DCE8; --gray-800: #E8ECF1; --white: #1A1D24; --border-std: rgba(255,255,255,0.08); --color-muted-border: rgba(255,255,255,0.05); --card-border: 1px solid rgba(255,255,255,0.08); --shadow: 0 2px 8px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.2); --shadow-md: 0 4px 16px rgba(0,0,0,0.4), 0 16px 48px rgba(0,0,0,0.3); --shadow-hover: 0 0 0 1.5px var(--blue); --focus-ring: 0 0 0 3px rgba(123,147,192,0.35); --sidebar-bg: #0E1014; --sidebar-ink: #E8ECF1; --sidebar-ink-muted: #636E7B; --sidebar-border: rgba(255,255,255,0.06); --sidebar-active-bg: rgba(123,147,192,0.15); --sidebar-active-ink: #A3B5D6; --sidebar-hover-bg: rgba(255,255,255,0.04); --chart-border: #1A1D24; --drawer-header-bg: #0A0A0B; --drawer-header-ink: #E8ECF1; --overlay-bg: rgba(0,0,0,0.7); --input-bg: #1E2028; --badge-bank-bg: rgba(123,147,192,0.15); --badge-bank-ink: #7B93C0; --badge-credit-bg: rgba(240,192,80,0.15); --badge-credit-ink: #F0C050; /* Dashboard structural */ --hero-bg: var(--card-bg); --hero-ink: var(--color-value); --hero-label-ink: var(--ink-muted); --hero-sub-ink: var(--color-label); --hero-border: 1px solid var(--border-std); --hero-shadow: var(--shadow); --dash-card-accent-h: 0px; --dash-card-shadow: none; --radius: 16px; /* Page-level structural */ --page-hero-bg: var(--card-bg); --page-hero-ink: var(--color-value); --page-hero-label-ink: var(--ink-muted); --page-hero-border: 1px solid var(--border-std); --page-hero-shadow: var(--shadow); --card-accent-h: 0px; --table-header-bg: var(--gray-50); --table-radius: var(--radius); --btn-radius: 12px; --input-radius: 10px; --radius-pill: 20px; } /* ─── 9. Vibrant Blocks — Light ─────────────────────────────────────────── */ [data-theme="vibrant"][data-mode="light"] { color-scheme: light; --base: #f5f5f5; --surface: #ffffff; --card-bg: #ffffff; --ink: #191919; --ink-muted: #888888; --border-ink: #191919; --color-label: #888888; --color-value: #191919; --color-title: #404040; --primary: #37b887; --primary-soft: rgba(55,184,135,0.08); --blue: #37b887; --blue-dark: #2a9a70; --blue-main: #37b887; --blue-light: #51d7a4; --blue-soft: rgba(55,184,135,0.08); --color-positive: #37b887; --color-negative: #fb5977; --accent-bank: #0ea5e9; --accent-bank-bg: rgba(14,165,233,0.08); --accent-invest: #37b887; --accent-invest-bg: rgba(55,184,135,0.08); --accent-re: #f59e0b; --accent-re-bg: rgba(245,158,11,0.08); --accent-loan: #404040; --accent-loan-bg: rgba(64,64,64,0.08); --accent-rsu: #fb5977; --accent-rsu-bg: rgba(251,89,119,0.08); --accent-pension: #ce6cff; --accent-pension-bg: rgba(206,108,255,0.08); --accent-insurance: #51d7a4; --accent-insurance-bg:rgba(81,215,164,0.08); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #f59e0b; --accent-vehicles-bg: rgba(245,158,11,0.08); --gray-50: #f5f5f5; --gray-100: #eeeeee; --gray-200: #e0e0e0; --gray-300: #cccccc; --gray-400: #888888; --gray-500: #666666; --gray-600: #404040; --gray-700: #191919; --gray-800: #0a0a0a; --white: #ffffff; --border-std: rgba(0,0,0,0.10); --color-muted-border: #eeeeee; --card-border: 1px solid rgba(0,0,0,0.10); --shadow: none; --shadow-md: 0 8px 32px rgba(0,0,0,0.15); --shadow-hover: 0 0 0 2px var(--blue); --focus-ring: 0 0 0 3px rgba(55,184,135,0.25); --sidebar-bg: #191919; --sidebar-ink: #e5e5e5; --sidebar-ink-muted: rgba(255,255,255,0.5); --sidebar-border: transparent; --sidebar-active-bg: rgba(81,215,164,0.12); --sidebar-active-ink: #51d7a4; --sidebar-hover-bg: rgba(255,255,255,0.06); --chart-border: #f5f5f5; --drawer-header-bg: #191919; --drawer-header-ink: #e5e5e5; --overlay-bg: rgba(0,0,0,0.5); --input-bg: #ffffff; --badge-bank-bg: rgba(14,165,233,0.1); --badge-bank-ink: #0284C7; --badge-credit-bg: rgba(245,158,11,0.1); --badge-credit-ink: #D97706; /* Dashboard structural */ --hero-bg: #191919; --hero-ink: #ffffff; --hero-label-ink: rgba(255,255,255,0.5); --hero-sub-ink: rgba(255,255,255,0.3); --hero-border: none; --hero-shadow: none; --dash-card-accent-h: 0px; --dash-card-shadow: none; --radius: 0px; /* Page-level structural */ --page-hero-bg: #191919; --page-hero-ink: #ffffff; --page-hero-label-ink: rgba(255,255,255,0.5); --page-hero-border: none; --page-hero-shadow: none; --card-accent-h: 0px; --table-header-bg: #191919; --table-radius: 0; --btn-radius: 0; --input-radius: 0; --radius-pill: 0; } /* ─── 10. Vibrant Blocks — Dark ──────────────────────────────────────────── */ [data-theme="vibrant"][data-mode="dark"] { color-scheme: dark; --base: #0A0A0A; --surface: #1A1A1A; --card-bg: #1A1A1A; --ink: #E5E5E5; --ink-muted: #666666; --border-ink: #AAAAAA; --color-label: #666666; --color-value: #E5E5E5; --color-title: #AAAAAA; --primary: #51d7a4; --primary-soft: rgba(81,215,164,0.12); --blue: #51d7a4; --blue-dark: #37b887; --blue-main: #51d7a4; --blue-light: #6ee7b7; --blue-soft: rgba(81,215,164,0.12); --color-positive: #4ADE80; --color-negative: #FB7185; --accent-bank: #0ea5e9; --accent-bank-bg: rgba(14,165,233,0.12); --accent-invest: #37b887; --accent-invest-bg: rgba(55,184,135,0.12); --accent-re: #f59e0b; --accent-re-bg: rgba(245,158,11,0.12); --accent-loan: #333333; --accent-loan-bg: rgba(51,51,51,0.15); --accent-rsu: #fb5977; --accent-rsu-bg: rgba(251,89,119,0.12); --accent-pension: #ce6cff; --accent-pension-bg: rgba(206,108,255,0.12); --accent-insurance: #51d7a4; --accent-insurance-bg:rgba(81,215,164,0.12); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #f59e0b; --accent-vehicles-bg: rgba(245,158,11,0.12); --gray-50: #1A1A1A; --gray-100: #222222; --gray-200: #333333; --gray-300: #444444; --gray-400: #666666; --gray-500: #888888; --gray-600: #AAAAAA; --gray-700: #CCCCCC; --gray-800: #E5E5E5; --white: #1A1A1A; --border-std: rgba(255,255,255,0.08); --color-muted-border: rgba(255,255,255,0.05); --card-border: 1px solid rgba(255,255,255,0.08); --shadow: none; --shadow-md: 0 8px 32px rgba(0,0,0,0.4); --shadow-hover: 0 0 0 2px var(--blue); --focus-ring: 0 0 0 3px rgba(81,215,164,0.3); --sidebar-bg: #111111; --sidebar-ink: #E5E5E5; --sidebar-ink-muted: rgba(255,255,255,0.35); --sidebar-border: transparent; --sidebar-active-bg: rgba(81,215,164,0.1); --sidebar-active-ink: #51d7a4; --sidebar-hover-bg: rgba(255,255,255,0.05); --chart-border: #0A0A0A; --drawer-header-bg: #111111; --drawer-header-ink: #E5E5E5; --overlay-bg: rgba(0,0,0,0.6); --input-bg: #222222; --badge-bank-bg: rgba(14,165,233,0.15); --badge-bank-ink: #0ea5e9; --badge-credit-bg: rgba(245,158,11,0.15); --badge-credit-ink: #f59e0b; /* Dashboard structural */ --hero-bg: #111111; --hero-ink: #ffffff; --hero-label-ink: rgba(255,255,255,0.5); --hero-sub-ink: rgba(255,255,255,0.3); --hero-border: none; --hero-shadow: none; --dash-card-accent-h: 0px; --dash-card-shadow: none; --radius: 0px; /* Page-level structural */ --page-hero-bg: #111111; --page-hero-ink: #ffffff; --page-hero-label-ink: rgba(255,255,255,0.5); --page-hero-border: none; --page-hero-shadow: none; --card-accent-h: 0px; --table-header-bg: #191919; --table-radius: 0; --btn-radius: 0; --input-radius: 0; --radius-pill: 0; } /* ─── 11. Editorial Finance — Light ──────────────────────────────────────────── */ /* "The Sovereign Ledger" — quiet authority, tonal layering, no explicit borders, ambient elevation, editorial typography hierarchy, professional deep blue. */ [data-theme="editorial"][data-mode="light"] { color-scheme: light; /* Base surfaces — tonal layering (cardstock metaphor) */ --base: #f8f9fa; --surface: #f3f4f5; --card-bg: #ffffff; /* Text — high-contrast editorial hierarchy */ --ink: #191c1d; --ink-muted: #414754; --border-ink: #191c1d; --color-label: #6b7280; --color-value: #191c1d; --color-title: #2d3142; /* Primary brand — professional deep blue */ --primary: #0b55cf; --primary-soft: rgba(11,85,207,0.06); --blue: #0b55cf; --blue-dark: #0943a3; --blue-main: #0b55cf; --blue-light: #3870ea; --blue-soft: rgba(11,85,207,0.06); /* Status — tertiary warmth instead of harsh red/green */ --color-positive: #16A34A; --color-negative: #9e4300; /* Domain accents — muted, editorial tones */ --accent-bank: #0b55cf; --accent-bank-bg: #d0e0ff; --accent-invest: #0d6e5e; --accent-invest-bg: rgba(13,110,94,0.08); --accent-re: #9e4300; --accent-re-bg: rgba(158,67,0,0.06); --accent-loan: #b91c1c; --accent-loan-bg: rgba(185,28,28,0.06); --accent-rsu: #6d28d9; --accent-rsu-bg: rgba(109,40,217,0.06); --accent-pension: #7c3aed; --accent-pension-bg: rgba(124,58,237,0.06); --accent-insurance: #0891b2; --accent-insurance-bg:rgba(8,145,178,0.06); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #92400e; --accent-vehicles-bg: rgba(146,64,14,0.06); /* Neutrals — warm-neutral tonal scale */ --gray-50: #f3f4f5; --gray-100: #edeef0; --gray-200: #e0e2e5; --gray-300: #c1c8d4; --gray-400: #8b95a3; --gray-500: #6b7280; --gray-600: #414754; --gray-700: #2d3142; --gray-800: #191c1d; --white: #ffffff; /* Borders & shadows — "No-Line Rule": ghost borders, ambient elevation */ --border-std: rgba(25,28,29,0.06); --color-muted-border: #edeef0; --card-border: 1px solid rgba(25,28,29,0.04); --shadow: 0 2px 32px rgba(25,28,29,0.06); --shadow-md: 0 4px 48px rgba(25,28,29,0.09); --shadow-hover: 0 0 0 1.5px var(--blue); --focus-ring: 0 0 0 3px rgba(11,85,207,0.2); /* Sidebar — tonal differentiation (surface-container-low) */ --sidebar-bg: #f3f4f5; --sidebar-ink: #191c1d; --sidebar-ink-muted: #6b7280; --sidebar-border: transparent; --sidebar-active-bg: #d0e0ff; --sidebar-active-ink: #0b55cf; --sidebar-hover-bg: #e7e8e9; /* Chart */ --chart-border: #f3f4f5; /* Misc semantic */ --drawer-header-bg: #191c1d; --drawer-header-ink: #f8f9fa; --overlay-bg: rgba(25,28,29,0.4); --input-bg: #f3f4f5; --badge-bank-bg: #d0e0ff; --badge-bank-ink: #0943a3; --badge-credit-bg: rgba(158,67,0,0.08); --badge-credit-ink: #9e4300; /* Dashboard structural — gradient hero banner (primary → primary_container) */ --hero-bg: linear-gradient(135deg, #0b55cf, #3870ea); --hero-ink: #ffffff; --hero-label-ink: rgba(255,255,255,0.8); --hero-sub-ink: rgba(255,255,255,0.65); --hero-border: none; --hero-shadow: 0 8px 40px rgba(11,85,207,0.18); --dash-card-accent-h: 0px; --dash-card-shadow: var(--shadow); --radius: 12px; /* Page-level structural */ --page-hero-bg: linear-gradient(135deg, #0b55cf, #3870ea); --page-hero-ink: #ffffff; --page-hero-label-ink: rgba(255,255,255,0.8); --page-hero-border: none; --page-hero-shadow: 0 8px 40px rgba(11,85,207,0.18); --card-accent-h: 0px; --table-header-bg: #f3f4f5; --table-radius: 12px; --btn-radius: 12px; --input-radius: 10px; --radius-pill: 20px; } /* ─── 12. Editorial Finance — Dark ───────────────────────────────────────────── */ [data-theme="editorial"][data-mode="dark"] { color-scheme: dark; /* Base surfaces — inverted tonal layering */ --base: #111317; --surface: #181b20; --card-bg: #1e2127; /* Text */ --ink: #e8ecf1; --ink-muted: #8b95a3; --border-ink: #8b95a3; --color-label: #636e7b; --color-value: #e8ecf1; --color-title: #b0bac8; /* Primary brand — brightened for dark backgrounds */ --primary: #5b8eef; --primary-soft: rgba(91,142,239,0.12); --blue: #5b8eef; --blue-dark: #3870ea; --blue-main: #5b8eef; --blue-light: #8ab4ff; --blue-soft: rgba(91,142,239,0.12); /* Status */ --color-positive: #34d399; --color-negative: #f0a060; /* Domain accents — brightened for dark */ --accent-bank: #5b8eef; --accent-bank-bg: rgba(91,142,239,0.12); --accent-invest: #34d399; --accent-invest-bg: rgba(52,211,153,0.10); --accent-re: #f0a060; --accent-re-bg: rgba(240,160,96,0.10); --accent-loan: #fb7185; --accent-loan-bg: rgba(251,113,133,0.10); --accent-rsu: #a78bfa; --accent-rsu-bg: rgba(167,139,250,0.10); --accent-pension: #c084fc; --accent-pension-bg: rgba(192,132,252,0.10); --accent-insurance: #22d3ee; --accent-insurance-bg:rgba(34,211,238,0.10); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #fbbf24; --accent-vehicles-bg: rgba(251,191,36,0.10); /* Neutrals — inverted tonal scale */ --gray-50: #181b20; --gray-100: #22252c; --gray-200: #2e3340; --gray-300: #3e4555; --gray-400: #636e7b; --gray-500: #8b95a3; --gray-600: #b0bac8; --gray-700: #d4dce8; --gray-800: #e8ecf1; --white: #1e2127; /* Borders & shadows — ghost borders for dark mode */ --border-std: rgba(255,255,255,0.06); --color-muted-border: rgba(255,255,255,0.04); --card-border: 1px solid rgba(255,255,255,0.05); --shadow: 0 2px 32px rgba(0,0,0,0.25); --shadow-md: 0 4px 48px rgba(0,0,0,0.35); --shadow-hover: 0 0 0 1.5px var(--blue); --focus-ring: 0 0 0 3px rgba(91,142,239,0.3); /* Sidebar — tonal differentiation */ --sidebar-bg: #141720; --sidebar-ink: #e8ecf1; --sidebar-ink-muted: #636e7b; --sidebar-border: transparent; --sidebar-active-bg: rgba(91,142,239,0.15); --sidebar-active-ink: #8ab4ff; --sidebar-hover-bg: rgba(255,255,255,0.04); /* Chart */ --chart-border: #1e2127; /* Misc semantic */ --drawer-header-bg: #0d0f13; --drawer-header-ink: #e8ecf1; --overlay-bg: rgba(0,0,0,0.5); --input-bg: #22252c; --badge-bank-bg: rgba(91,142,239,0.15); --badge-bank-ink: #5b8eef; --badge-credit-bg: rgba(240,160,96,0.15); --badge-credit-ink: #f0a060; /* Dashboard structural — darker gradient hero */ --hero-bg: linear-gradient(135deg, #0943a3, #2860d8); --hero-ink: #ffffff; --hero-label-ink: rgba(255,255,255,0.75); --hero-sub-ink: rgba(255,255,255,0.55); --hero-border: none; --hero-shadow: 0 8px 40px rgba(9,67,163,0.3); --dash-card-accent-h: 0px; --dash-card-shadow: var(--shadow); --radius: 12px; /* Page-level structural */ --page-hero-bg: linear-gradient(135deg, #0943a3, #2860d8); --page-hero-ink: #ffffff; --page-hero-label-ink: rgba(255,255,255,0.75); --page-hero-border: none; --page-hero-shadow: 0 8px 40px rgba(9,67,163,0.3); --card-accent-h: 0px; --table-header-bg: #181b20; --table-radius: 12px; --btn-radius: 12px; --input-radius: 10px; --radius-pill: 20px; } /* ─── 13. Obsidian Flow — Light ──────────────────────────────────────────────── */ /* "Architectural Radiance" — neon green on cool surfaces, engineered precision, high-contrast data presentation with a tech-forward aesthetic. */ [data-theme="obsidian"][data-mode="light"] { color-scheme: light; /* Base surfaces — cool tech-light */ --base: #eef0f4; --surface: #e4e7ec; --card-bg: #ffffff; /* Text */ --ink: #0B0E14; --ink-muted: #4a5568; --border-ink: #0B0E14; --color-label: #718096; --color-value: #0B0E14; --color-title: #1a202c; /* Primary — neon green toned for light surfaces */ --primary: #00b84c; --primary-soft: rgba(0,184,76,0.08); --blue: #00b84c; --blue-dark: #009a3e; --blue-main: #00b84c; --blue-light: #00ED64; --blue-soft: rgba(0,184,76,0.08); /* Status */ --color-positive: #00b84c; --color-negative: #ef4444; /* Domain accents — electric palette */ --accent-bank: #3b82f6; --accent-bank-bg: rgba(59,130,246,0.08); --accent-invest: #00b84c; --accent-invest-bg: rgba(0,184,76,0.08); --accent-re: #f59e0b; --accent-re-bg: rgba(245,158,11,0.08); --accent-loan: #ef4444; --accent-loan-bg: rgba(239,68,68,0.08); --accent-rsu: #8b5cf6; --accent-rsu-bg: rgba(139,92,246,0.08); --accent-pension: #6366f1; --accent-pension-bg: rgba(99,102,241,0.08); --accent-insurance: #06b6d4; --accent-insurance-bg:rgba(6,182,212,0.08); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #f59e0b; --accent-vehicles-bg: rgba(245,158,11,0.08); /* Neutrals */ --gray-50: #f0f2f5; --gray-100: #e4e7ec; --gray-200: #cbd5e0; --gray-300: #a0aec0; --gray-400: #718096; --gray-500: #4a5568; --gray-600: #2d3748; --gray-700: #1a202c; --gray-800: #0B0E14; --white: #ffffff; /* Borders & shadows — subtle green tint */ --border-std: rgba(0,184,76,0.12); --color-muted-border: #e4e7ec; --card-border: 1px solid rgba(0,184,76,0.10); --shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0 1px rgba(0,184,76,0.15); --shadow-md: 0 4px 24px rgba(0,0,0,0.10), 0 0 1px rgba(0,184,76,0.2); --shadow-hover: 0 0 0 1.5px var(--blue); --focus-ring: 0 0 0 3px rgba(0,184,76,0.25); /* Sidebar — dark sidebar even in light mode (architectural contrast) */ --sidebar-bg: #0B0E14; --sidebar-ink: #e2e8f0; --sidebar-ink-muted: #94A3B8; --sidebar-border: rgba(0,237,100,0.1); --sidebar-active-bg: rgba(0,237,100,0.12); --sidebar-active-ink: #00ED64; --sidebar-hover-bg: rgba(255,255,255,0.04); /* Chart */ --chart-border: #eef0f4; /* Misc semantic */ --drawer-header-bg: #0B0E14; --drawer-header-ink: #e2e8f0; --overlay-bg: rgba(11,14,20,0.5); --input-bg: #f0f2f5; --badge-bank-bg: rgba(59,130,246,0.1); --badge-bank-ink: #2563eb; --badge-credit-bg: rgba(245,158,11,0.1); --badge-credit-ink: #d97706; /* Dashboard structural */ --hero-bg: linear-gradient(135deg, #0B0E14, #151820); --hero-ink: #00ED64; --hero-label-ink: rgba(255,255,255,0.7); --hero-sub-ink: #94A3B8; --hero-border: 1px solid rgba(0,237,100,0.15); --hero-shadow: 0 0 40px rgba(0,237,100,0.08); --dash-card-accent-h: 0px; --dash-card-shadow: var(--shadow); --radius: 8px; /* Page-level structural */ --page-hero-bg: linear-gradient(135deg, #0B0E14, #151820); --page-hero-ink: #00ED64; --page-hero-label-ink: rgba(255,255,255,0.7); --page-hero-border: 1px solid rgba(0,237,100,0.15); --page-hero-shadow: 0 0 40px rgba(0,237,100,0.08); --card-accent-h: 0px; --table-header-bg: #e4e7ec; --table-radius: 8px; --btn-radius: 8px; --input-radius: 8px; --radius-pill: 16px; } /* ─── 14. Obsidian Flow — Dark ───────────────────────────────────────────────── */ [data-theme="obsidian"][data-mode="dark"] { color-scheme: dark; /* Base surfaces — deep obsidian with glass layering */ --base: #0B0E14; --surface: #10131A; --card-bg: #151820; /* Text */ --ink: #ffffff; --ink-muted: #94A3B8; --border-ink: #94A3B8; --color-label: #64748b; --color-value: #ffffff; --color-title: #cbd5e1; /* Primary — full neon green */ --primary: #00ED64; --primary-soft: rgba(0,237,100,0.12); --blue: #00ED64; --blue-dark: #00b84c; --blue-main: #00ED64; --blue-light: #4afa8e; --blue-soft: rgba(0,237,100,0.12); /* Status */ --color-positive: #00ED64; --color-negative: #ff6b6b; /* Domain accents — electric neon palette */ --accent-bank: #38bdf8; --accent-bank-bg: rgba(56,189,248,0.10); --accent-invest: #00ED64; --accent-invest-bg: rgba(0,237,100,0.10); --accent-re: #fbbf24; --accent-re-bg: rgba(251,191,36,0.10); --accent-loan: #ff6b6b; --accent-loan-bg: rgba(255,107,107,0.10); --accent-rsu: #a78bfa; --accent-rsu-bg: rgba(167,139,250,0.10); --accent-pension: #818cf8; --accent-pension-bg: rgba(129,140,248,0.10); --accent-insurance: #22d3ee; --accent-insurance-bg:rgba(34,211,238,0.10); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #fbbf24; --accent-vehicles-bg: rgba(251,191,36,0.10); /* Neutrals — cool dark scale */ --gray-50: #10131A; --gray-100: #181c25; --gray-200: #1e2330; --gray-300: #2a3040; --gray-400: #64748b; --gray-500: #94A3B8; --gray-600: #cbd5e1; --gray-700: #e2e8f0; --gray-800: #f1f5f9; --white: #151820; /* Borders & shadows — glowing green borders, glassmorphism */ --border-std: rgba(0,237,100,0.12); --color-muted-border: rgba(0,237,100,0.06); --card-border: 1px solid rgba(0,237,100,0.12); --shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 1px rgba(0,237,100,0.15); --shadow-md: 0 8px 40px rgba(0,0,0,0.5), 0 0 2px rgba(0,237,100,0.2); --shadow-hover: 0 0 0 1.5px #00ED64; --focus-ring: 0 0 0 3px rgba(0,237,100,0.3); /* Sidebar — obsidian with green glow */ --sidebar-bg: #0B0E14; --sidebar-ink: #e2e8f0; --sidebar-ink-muted: #64748b; --sidebar-border: rgba(0,237,100,0.1); --sidebar-active-bg: rgba(0,237,100,0.12); --sidebar-active-ink: #00ED64; --sidebar-hover-bg: rgba(0,237,100,0.06); /* Chart */ --chart-border: #151820; /* Misc semantic */ --drawer-header-bg: #080a0f; --drawer-header-ink: #e2e8f0; --overlay-bg: rgba(0,0,0,0.7); --input-bg: #10131A; --badge-bank-bg: rgba(56,189,248,0.12); --badge-bank-ink: #38bdf8; --badge-credit-bg: rgba(251,191,36,0.12); --badge-credit-ink: #fbbf24; /* Dashboard structural — obsidian hero with neon green glow */ --hero-bg: #0B0E14; --hero-ink: #00ED64; --hero-label-ink: #94A3B8; --hero-sub-ink: #64748b; --hero-border: 1px solid rgba(0,237,100,0.15); --hero-shadow: 0 0 60px rgba(0,237,100,0.08), 0 4px 32px rgba(0,0,0,0.4); --dash-card-accent-h: 0px; --dash-card-shadow: var(--shadow); --radius: 8px; /* Page-level structural */ --page-hero-bg: #0B0E14; --page-hero-ink: #00ED64; --page-hero-label-ink: #94A3B8; --page-hero-border: 1px solid rgba(0,237,100,0.15); --page-hero-shadow: 0 0 60px rgba(0,237,100,0.08), 0 4px 32px rgba(0,0,0,0.4); --card-accent-h: 0px; --table-header-bg: #10131A; --table-radius: 8px; --btn-radius: 8px; --input-radius: 8px; --radius-pill: 16px; } /* ─── 15. Serene Wealth — Light ──────────────────────────────────────────────── */ /* "The Mindful Ledger" — sage green, warm creams, organic sophistication, pill-shaped elements, tonal layering instead of borders. */ [data-theme="serene"][data-mode="light"] { color-scheme: light; /* Base surfaces — warm cream tonal layering */ --base: #FAF9F6; --surface: #F4F1EC; --card-bg: #ffffff; /* Text — editorial warmth */ --ink: #2C2C2C; --ink-muted: #6B6B60; --border-ink: #2C2C2C; --color-label: #8E8E82; --color-value: #2C2C2C; --color-title: #4A4A42; /* Primary — sage green */ --primary: #6B8A6E; --primary-soft: rgba(143,162,144,0.12); --blue: #6B8A6E; --blue-dark: #5A7A5D; --blue-main: #6B8A6E; --blue-light: #8FA290; --blue-soft: rgba(143,162,144,0.12); /* Status — earthy tones */ --color-positive: #6B8A6E; --color-negative: #B8706A; /* Domain accents — muted earthy palette */ --accent-bank: #6B8A6E; --accent-bank-bg: rgba(107,138,110,0.10); --accent-invest: #7A9E7E; --accent-invest-bg: rgba(122,158,126,0.10); --accent-re: #C4956A; --accent-re-bg: rgba(196,149,106,0.08); --accent-loan: #B8706A; --accent-loan-bg: rgba(184,112,106,0.08); --accent-rsu: #8E7CB8; --accent-rsu-bg: rgba(142,124,184,0.08); --accent-pension: #7A8EB8; --accent-pension-bg: rgba(122,142,184,0.08); --accent-insurance: #6A9EB0; --accent-insurance-bg:rgba(106,158,176,0.08); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #B8A06A; --accent-vehicles-bg: rgba(184,160,106,0.08); /* Neutrals — warm gray scale */ --gray-50: #F4F1EC; --gray-100: #EDE9E2; --gray-200: #DDD8CF; --gray-300: #C4BFB5; --gray-400: #8E8E82; --gray-500: #6B6B60; --gray-600: #4A4A42; --gray-700: #2C2C2C; --gray-800: #1A1A18; --white: #ffffff; /* Borders & shadows — minimal, tonal separation */ --border-std: rgba(44,44,44,0.06); --color-muted-border: #EDE9E2; --card-border: 1px solid rgba(44,44,44,0.04); --shadow: 0 2px 20px rgba(44,44,44,0.05); --shadow-md: 0 4px 32px rgba(44,44,44,0.08); --shadow-hover: 0 0 0 2px var(--blue); --focus-ring: 0 0 0 3px rgba(143,162,144,0.25); /* Sidebar — warm sage tonal layer */ --sidebar-bg: #F4F1EC; --sidebar-ink: #2C2C2C; --sidebar-ink-muted: #6B6B60; --sidebar-border: transparent; --sidebar-active-bg: #6B8A6E; --sidebar-active-ink: #ffffff; --sidebar-hover-bg: #EDE9E2; /* Chart */ --chart-border: #F4F1EC; /* Misc semantic */ --drawer-header-bg: #4A4A42; --drawer-header-ink: #FAF9F6; --overlay-bg: rgba(44,44,44,0.35); --input-bg: #F4F1EC; --badge-bank-bg: rgba(107,138,110,0.12); --badge-bank-ink: #5A7A5D; --badge-credit-bg: rgba(196,149,106,0.12); --badge-credit-ink: #9E7040; /* Dashboard structural — warm cream hero */ --hero-bg: var(--card-bg); --hero-ink: var(--color-value); --hero-label-ink: var(--ink-muted); --hero-sub-ink: var(--color-label); --hero-border: none; --hero-shadow: var(--shadow); --dash-card-accent-h: 0px; --dash-card-shadow: var(--shadow); --radius: 20px; /* Page-level structural */ --page-hero-bg: var(--card-bg); --page-hero-ink: var(--color-value); --page-hero-label-ink: var(--ink-muted); --page-hero-border: none; --page-hero-shadow: var(--shadow); --card-accent-h: 0px; --table-header-bg: #F4F1EC; --table-radius: 20px; --btn-radius: 999px; --input-radius: 16px; --radius-pill: 999px; } /* ─── 16. Serene Wealth — Dark ───────────────────────────────────────────────── */ [data-theme="serene"][data-mode="dark"] { color-scheme: dark; /* Base surfaces — warm dark tones */ --base: #1A1917; --surface: #22211E; --card-bg: #2A2926; /* Text */ --ink: #EDE9E2; --ink-muted: #8E8E82; --border-ink: #8E8E82; --color-label: #6B6B60; --color-value: #EDE9E2; --color-title: #C4BFB5; /* Primary — brighter sage for dark */ --primary: #8FA290; --primary-soft: rgba(143,162,144,0.15); --blue: #8FA290; --blue-dark: #6B8A6E; --blue-main: #8FA290; --blue-light: #A8BCA9; --blue-soft: rgba(143,162,144,0.15); /* Status */ --color-positive: #8FA290; --color-negative: #D4908A; /* Domain accents — brighter earthy for dark */ --accent-bank: #8FA290; --accent-bank-bg: rgba(143,162,144,0.12); --accent-invest: #A8BCA9; --accent-invest-bg: rgba(168,188,169,0.10); --accent-re: #D4B08A; --accent-re-bg: rgba(212,176,138,0.10); --accent-loan: #D4908A; --accent-loan-bg: rgba(212,144,138,0.10); --accent-rsu: #B0A0D4; --accent-rsu-bg: rgba(176,160,212,0.10); --accent-pension: #A0B0D4; --accent-pension-bg: rgba(160,176,212,0.10); --accent-insurance: #8AB8C8; --accent-insurance-bg:rgba(138,184,200,0.10); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #D4C08A; --accent-vehicles-bg: rgba(212,192,138,0.10); /* Neutrals — warm dark scale */ --gray-50: #22211E; --gray-100: #2E2D2A; --gray-200: #3A3935; --gray-300: #504E48; --gray-400: #6B6B60; --gray-500: #8E8E82; --gray-600: #C4BFB5; --gray-700: #DDD8CF; --gray-800: #EDE9E2; --white: #2A2926; /* Borders & shadows */ --border-std: rgba(237,233,226,0.06); --color-muted-border: rgba(237,233,226,0.04); --card-border: 1px solid rgba(237,233,226,0.05); --shadow: 0 2px 20px rgba(0,0,0,0.25); --shadow-md: 0 4px 32px rgba(0,0,0,0.35); --shadow-hover: 0 0 0 2px var(--blue); --focus-ring: 0 0 0 3px rgba(143,162,144,0.3); /* Sidebar — warm dark tonal layer */ --sidebar-bg: #1A1917; --sidebar-ink: #EDE9E2; --sidebar-ink-muted: #6B6B60; --sidebar-border: transparent; --sidebar-active-bg: rgba(143,162,144,0.18); --sidebar-active-ink: #A8BCA9; --sidebar-hover-bg: rgba(237,233,226,0.04); /* Chart */ --chart-border: #2A2926; /* Misc semantic */ --drawer-header-bg: #141312; --drawer-header-ink: #EDE9E2; --overlay-bg: rgba(0,0,0,0.5); --input-bg: #2E2D2A; --badge-bank-bg: rgba(143,162,144,0.15); --badge-bank-ink: #8FA290; --badge-credit-bg: rgba(212,176,138,0.15); --badge-credit-ink: #D4B08A; /* Dashboard structural */ --hero-bg: var(--card-bg); --hero-ink: var(--color-value); --hero-label-ink: var(--ink-muted); --hero-sub-ink: var(--color-label); --hero-border: none; --hero-shadow: var(--shadow); --dash-card-accent-h: 0px; --dash-card-shadow: var(--shadow); --radius: 20px; /* Page-level structural */ --page-hero-bg: var(--card-bg); --page-hero-ink: var(--color-value); --page-hero-label-ink: var(--ink-muted); --page-hero-border: none; --page-hero-shadow: var(--shadow); --card-accent-h: 0px; --table-header-bg: #22211E; --table-radius: 20px; --btn-radius: 999px; --input-radius: 16px; --radius-pill: 999px; } /* ─── 9. Dotts (Architectural Ledger) — Light ────────────────────────────────── */ [data-theme="dotts"][data-mode="light"] { color-scheme: light; /* Base surfaces — warm ivory hierarchy */ --base: #FBF9F1; --surface: #F6F4EC; --card-bg: #FFFFFF; /* Text */ --ink: #1B1C17; --ink-muted: #4F4535; --border-ink: #1B1C17; --color-label: #817563; --color-value: #1B1C17; --color-title: #4F4535; /* Primary brand — deep ochre/gold */ --primary: #785600; --primary-soft: rgba(120,86,0,0.08); --blue: #785600; --blue-dark: #6B4D00; --blue-main: #785600; --blue-light: #986D00; --blue-soft: rgba(120,86,0,0.08); /* Status */ --color-positive: #16A34A; --color-negative: #EF4444; /* Domain accents — distinct per category */ --accent-bank: #2563EB; --accent-bank-bg: #EFF6FF; --accent-invest: #059669; --accent-invest-bg: #ECFDF5; --accent-re: #B8860B; --accent-re-bg: #FFF8E1; --accent-loan: #DC2626; --accent-loan-bg: #FEF2F2; --accent-rsu: #EC4899; --accent-rsu-bg: #FDF2F8; --accent-pension: #7C3AED; --accent-pension-bg: #F5F3FF; --accent-insurance: #0891B2; --accent-insurance-bg:#ECFEFF; --accent-crypto: #F7931A; --accent-crypto-bg: #FFF7ED; --accent-vehicles: #B8860B; --accent-vehicles-bg: #FFF8E1; --accent-employer: #2563EB; --accent-employer-bg: #EFF6FF; /* Warm neutrals — kept very subtle for no-line aesthetic */ --gray-50: #FAF8F2; --gray-100: #F5F3EB; --gray-200: #F0EEE6; --gray-300: #D3C4AF; --gray-400: #817563; --gray-500: #6B6355; --gray-600: #4F4535; --gray-700: #2D2A24; --gray-800: #1B1C17; --white: #FFFFFF; /* Borders & shadows — no-line rule: depth via tonal shift + shadow only */ --border-std: transparent; --color-muted-border: #F5F3EB; --card-border: none; --shadow: 0 1px 3px rgba(27,28,23,0.04), 0 4px 16px rgba(27,28,23,0.04); --shadow-md: 0 4px 24px rgba(27,28,23,0.06); --shadow-hover: 0 0 0 1.5px #785600; --focus-ring: 0 0 0 3px rgba(120,86,0,0.25); /* Sidebar — soft linen layer */ --sidebar-bg: #F0EEE6; --sidebar-ink: #1B1C17; --sidebar-ink-muted: #4F4535; --sidebar-border: transparent; --sidebar-active-bg: #785600; --sidebar-active-ink: #FFFFFF; --sidebar-hover-bg: rgba(120,86,0,0.08); /* Chart */ --chart-border: #F0EEE6; /* Misc semantic */ --drawer-header-bg: #785600; --drawer-header-ink: #FFFFFF; --overlay-bg: rgba(27,28,23,0.5); --input-bg: #FFFFFF; --badge-bank-bg: #EFF6FF; --badge-bank-ink: #1D4ED8; --badge-credit-bg: #FFF7ED; --badge-credit-ink: #C2410C; /* Dashboard structural */ --hero-bg: var(--card-bg); --hero-ink: var(--color-value); --hero-label-ink: var(--ink-muted); --hero-sub-ink: var(--color-label); --hero-border: none; --hero-shadow: 0 0 30px rgba(120,86,0,0.06); --dash-card-accent-h: 0px; --dash-card-shadow: var(--shadow); --radius: 16px; /* Page-level structural */ --page-hero-bg: var(--card-bg); --page-hero-ink: var(--color-value); --page-hero-label-ink: var(--ink-muted); --page-hero-border: none; --page-hero-shadow: var(--shadow); --card-accent-h: 0px; --table-header-bg: #F6F4EC; --table-radius: var(--radius); --btn-radius: 12px; --input-radius: 10px; --radius-pill: 20px; } /* ─── 10. Dotts (Architectural Ledger) — Dark ────────────────────────────────── */ [data-theme="dotts"][data-mode="dark"] { color-scheme: dark; /* Inverted warm surfaces */ --base: #1B1C17; --surface: #2D2A24; --card-bg: #2D2A24; /* Light text on dark */ --ink: #F6F4EC; --ink-muted: #D3C4AF; --border-ink: #D3C4AF; --color-label: #817563; --color-value: #F6F4EC; --color-title: #EAE8E0; /* Brightened gold primary */ --primary: #D4AF37; --primary-soft: rgba(212,175,55,0.15); --blue: #D4AF37; --blue-dark: #B8860B; --blue-main: #D4AF37; --blue-light: #E8C84A; --blue-soft: rgba(212,175,55,0.15); /* Status */ --color-positive: #34D399; --color-negative: #F87171; /* Domain accents — brightened for dark bg */ --accent-bank: #38BDF8; --accent-bank-bg: rgba(56,189,248,0.12); --accent-invest: #34D399; --accent-invest-bg: rgba(52,211,153,0.12); --accent-re: #FBBF24; --accent-re-bg: rgba(251,191,36,0.12); --accent-loan: #FB7185; --accent-loan-bg: rgba(251,113,133,0.12); --accent-rsu: #F472B6; --accent-rsu-bg: rgba(244,114,182,0.12); --accent-pension: #A78BFA; --accent-pension-bg: rgba(167,139,250,0.12); --accent-insurance: #22D3EE; --accent-insurance-bg:rgba(34,211,238,0.12); --accent-crypto: #F7931A; --accent-crypto-bg: rgba(247,147,26,0.12); --accent-vehicles: #FBBF24; --accent-vehicles-bg: rgba(251,191,36,0.12); --accent-employer: #38BDF8; --accent-employer-bg: rgba(56,189,248,0.12); /* Inverted warm grays */ --gray-50: #2D2A24; --gray-100: #3A3630; --gray-200: #4F4535; --gray-300: #817563; --gray-400: #D3C4AF; --gray-500: #EAE8E0; --gray-600: #F0EEE6; --gray-700: #F6F4EC; --gray-800: #FAF8F0; --white: #2D2A24; /* Borders & shadows — no-line rule */ --border-std: transparent; --color-muted-border: rgba(255,255,255,0.06); --card-border: none; --shadow: 0 1px 4px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.2); --shadow-md: 0 2px 8px rgba(0,0,0,0.25), 0 12px 32px rgba(0,0,0,0.3); --shadow-hover: 0 0 0 1.5px #D4AF37; --focus-ring: 0 0 0 3px rgba(212,175,55,0.35); /* Sidebar — dark warm layer */ --sidebar-bg: #2D2A24; --sidebar-ink: #F6F4EC; --sidebar-ink-muted: #817563; --sidebar-border: transparent; --sidebar-active-bg: #D4AF37; --sidebar-active-ink: #1B1C17; --sidebar-hover-bg: rgba(255,255,255,0.06); /* Chart */ --chart-border: #2D2A24; /* Misc semantic */ --drawer-header-bg: #1B1C17; --drawer-header-ink: #F6F4EC; --overlay-bg: rgba(0,0,0,0.6); --input-bg: #3A3630; --badge-bank-bg: rgba(56,189,248,0.15); --badge-bank-ink: #38BDF8; --badge-credit-bg: rgba(251,191,36,0.15); --badge-credit-ink: #FBBF24; /* Dashboard structural */ --hero-bg: var(--card-bg); --hero-ink: var(--color-value); --hero-label-ink: var(--ink-muted); --hero-sub-ink: var(--color-label); --hero-border: none; --hero-shadow: 0 0 30px rgba(212,175,55,0.08); --dash-card-accent-h: 0px; --dash-card-shadow: var(--shadow); --radius: 16px; /* Page-level structural */ --page-hero-bg: var(--card-bg); --page-hero-ink: var(--color-value); --page-hero-label-ink: var(--ink-muted); --page-hero-border: none; --page-hero-shadow: var(--shadow); --card-accent-h: 0px; --table-header-bg: #3A3630; --table-radius: var(--radius); --btn-radius: 12px; --input-radius: 10px; --radius-pill: 20px; } /* ─── Dotts — Component Overrides (both modes) ───────────────────────────────── */ /* Tables: very subtle row separators */ [data-theme="dotts"] .txn-table th, [data-theme="dotts"] .app-table th { border-bottom: 1px solid var(--gray-100); } [data-theme="dotts"] .txn-table td, [data-theme="dotts"] .app-table td, [data-theme="dotts"] .txn-all-table tbody tr { border-bottom: 1px solid var(--gray-50); } /* Tabs: subtle bottom border */ [data-theme="dotts"] .tabs { border-bottom-color: var(--gray-100); } [data-theme="dotts"] .pill-tab { border-color: var(--gray-200); } /* Inputs and buttons: subtle warm borders */ [data-theme="dotts"] .form-input, [data-theme="dotts"] .form-select, [data-theme="dotts"] .form-textarea { border-color: var(--gray-200); } [data-theme="dotts"] .app-btn { border-color: var(--gray-200); } /* Account filter panels */ [data-theme="dotts"] .acc-filter-panel, [data-theme="dotts"] .acc-filter-group, [data-theme="dotts"] .acc-filter-group-header { border-color: var(--gray-100); } /* Page topbar */ [data-theme="dotts"] .page-topbar { border-bottom-color: transparent; } /* Data rows */ [data-theme="dotts"] .data-row.muted { border-top-color: var(--gray-50); } /* Detail rows across all pages */ [data-theme="dotts"] .re-detail-row, [data-theme="dotts"] .ln-card-track-row, [data-theme="dotts"] .ins-policy-row { border-bottom-color: var(--gray-50); } /* All tables: subtle separators */ [data-theme="dotts"] .ln-schedule-table th, [data-theme="dotts"] .perf-table th, [data-theme="dotts"] .hon-table th, [data-theme="dotts"] .emp-year-table th, [data-theme="dotts"] .exp-merchants-table th, [data-theme="dotts"] .report-monthly-tbl th, [data-theme="dotts"] .txn-all-table th { border-bottom-color: var(--gray-100); } [data-theme="dotts"] .ln-schedule-table td, [data-theme="dotts"] .perf-table td, [data-theme="dotts"] .hon-table td, [data-theme="dotts"] .emp-year-table td, [data-theme="dotts"] .exp-merchants-table td, [data-theme="dotts"] .report-monthly-tbl td, [data-theme="dotts"] .txn-all-table td { border-bottom-color: var(--gray-50); } [data-theme="dotts"] .ln-section-divider { border-top-color: var(--gray-100); } /* Savings topbar tabs */ [data-theme="dotts"] .savings-topbar .tab { border-bottom-color: transparent; } [data-theme="dotts"] .savings-topbar .tab.active { border-bottom-color: var(--primary); } /* Card hover: shadow instead of border */ [data-theme="dotts"] .app-card[role="button"]:hover { border-color: transparent; box-shadow: var(--shadow-md); }