/* ---------------------------------------------------------------- * Property of JIL Sovereign Technologies, Inc. (DE). * All Rights Reserved. 2025-2026 Patent Pending. * Author: Jeff Mendonca (Dallas TX) * File: lib/design-system/jil-tokens.css (CANONICAL SSOT) * Repo: jammer-x/jil-sovereign-full-go-live * Version: 2026.03.25-930 * ---------------------------------------------------------------- * This is the single source of truth for ALL JIL design tokens. * Copies live at: * - apps/central-portal/public/assets/jil-tokens.css (portal) * - /opt/jil-wallet/src/app/jil-tokens.css (wallet) * Both copies are auto-synced from this file during deploys. * DO NOT edit the copies directly - edit this file instead. * ---------------------------------------------------------------- */ /* ================================================================ JIL DESIGN TOKEN SYSTEM Single source of truth for jilsovereign.com + getjil.com + wallet.getjil.com ================================================================ Usage: jilsovereign.com - getjil.com - wallet.getjil.com - ================================================================ */ /* ================================================================ DARK-MODE READABILITY RULE (added 2026-05-14) ---------------------------------------------------------------- Every text/surface/border/semantic token defined in a LIGHT theme MUST also be defined in EVERY DARK theme — otherwise pages using inline `color: var(--text-body, #2D3D52)` fall through to the light-mode hex on a dark background, producing dark-blue-on-dark. The :root block below carries dark-safe defaults (currentColor / transparent) so any token we forgot still falls back to a theme- aware value, not a hardcoded colour. See "Dark-mode parity tokens" block inside each dark theme below for the full list to mirror. ================================================================ */ :root { --text-body: currentColor; --text-heading-alt: currentColor; --muted-fg: currentColor; --subtle: currentColor; --ink: currentColor; --surface-deep: transparent; --surface-deeper: transparent; --border-soft: currentColor; --rule: currentColor; /* --label-eyebrow default for no-theme case. #7C5F18 hits 5.71:1 AA on cream/white backgrounds. Theme blocks override with theme- appropriate gold variants. Fix 2026-05-15. */ --label-eyebrow: #7C5F18; } /* ---------------------------------------------------------------- 1. SHARED BRAND TOKENS These values are identical across every theme. ---------------------------------------------------------------- */ :root { /* -- Gold accent system (the universal JIL signature) ---------- */ --gold: #C9A227; --gold-primary: #C9A227; --gold-soft: #E4C35A; --gold-deep: #A87C1F; --gold-light: #F2D47A; --gold-glow: rgba(201, 162, 39, 0.22); --gold-border: rgba(201, 162, 39, 0.28); --gold-tint: rgba(201, 162, 39, 0.10); --text-on-gold: #0B0F16; /* -- Gold gradient (premium buttons, badges, highlight strokes) */ --gradient-gold: linear-gradient(135deg, #A87C1F 0%, #C9A227 55%, #E4C35A 100%); /* -- Semantic status colors ------------------------------------ */ --success: #10B981; --success-tint: rgba(16, 185, 129, 0.12); --warning: #F59E0B; --warning-tint: rgba(245, 158, 11, 0.12); --error: #EF4444; --error-tint: rgba(239, 68, 68, 0.12); /* -- Typography ------------------------------------------------ */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; --font-display: 'DM Sans', 'Inter', sans-serif; /* -- Spacing scale --------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-8: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ --space-12: 5rem; /* 80px */ --space-16: 8rem; /* 128px */ /* -- Border radius --------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* -- Transition ------------------------------------------------ */ --transition: 0.25s ease; --transition-fast: 0.15s ease; --transition-slow: 0.4s ease; /* -- Container ------------------------------------------------- */ --container-sm: 640px; --container-md: 800px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1400px; } /* ---------------------------------------------------------------- 2. SOVEREIGN DARK THEME (jilsovereign.com - primary) Deep navy base with blue tech accents + gold premium signals. ---------------------------------------------------------------- */ [data-theme="sovereign-dark"] { color-scheme: dark; /* WCAG AA eyebrow contrast (fix 2026-05-14). NEVER REMOVE. */ --label-eyebrow: #E4C35A; /* -- Backgrounds ----------------------------------------------- */ --bg-page: #0A0D10; --bg-surface: #10171C; --bg-elevated: #151F26; --bg-soft: #1B262E; --bg-overlay: rgba(10, 13, 16, 0.85); /* -- Text (gold tints on dark for readability) ----------------- */ --text-primary: #F5F7FB; --text-secondary: #E4C35A; --text-muted: #C9A227; --text-inverse: #0F172A; /* -- Blue tech accent (sovereign-only) ------------------------- */ --blue: #2F6BFF; --blue-soft: #6FA6FF; --blue-glow: #CFE9FF; --blue-deep: #173A8A; --blue-hover: #1D4ED8; --blue-tint: rgba(47, 107, 255, 0.12); /* -- Borders --------------------------------------------------- */ --border-subtle: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --divider: rgba(184, 194, 216, 0.16); /* -- Shadows --------------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.45); --shadow-glow-gold: 0 0 20px rgba(212, 175, 55, 0.15); --shadow-glow-blue: 0 0 30px rgba(47, 107, 255, 0.12); /* -- Card presets ---------------------------------------------- */ --card-bg: rgba(255, 255, 255, 0.03); --card-border: rgba(255, 255, 255, 0.08); --card-blur: blur(10px); --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.24); /* Premium card variant */ --card-premium-bg: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%); --card-premium-border: rgba(212, 175, 55, 0.18); --card-premium-shadow: 0 0 0 1px rgba(212,175,55,0.06), 0 16px 40px rgba(0,0,0,0.28); /* -- Page gradients -------------------------------------------- */ --gradient-hero: radial-gradient(circle at 72% 28%, rgba(212, 175, 55, 0.16), transparent 24%), radial-gradient(circle at 22% 18%, rgba(212, 175, 55, 0.10), transparent 20%), linear-gradient(135deg, #0A0D10 0%, #10171C 45%, #151F26 100%); --gradient-section: linear-gradient(180deg, #10171C 0%, #0E1419 100%); --gradient-blue-glow: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0) 70%); /* -- Scrollbar ------------------------------------------------- */ --scrollbar-thumb: rgba(212, 175, 55, 0.3); --scrollbar-thumb-hover: rgba(212, 175, 55, 0.5); /* -- Glass ----------------------------------------------------- */ --glass-bg: rgba(16, 23, 28, 0.75); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: blur(16px); /* -- Cinematic background layers ------------------------------ */ --cinematic-base: radial-gradient(ellipse at 20% 30%, rgba(212, 175, 55, 0.60) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(212, 175, 55, 0.45) 0%, transparent 50%), linear-gradient(170deg, #020304 0%, #040608 40%, #030405 100%); --cinematic-grid-color: rgba(212, 175, 55, 0.06); --cinematic-grid-size: 60px; --cinematic-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.30) 100%); --cinematic-hero-glow: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.55) 0%, transparent 60%); --cinematic-glass-bg: rgba(255, 255, 255, 0.03); --cinematic-glass-border: rgba(255, 255, 255, 0.06); --cinematic-glass-blur: blur(20px); --cinematic-enabled: 1; /* -- Legacy jil-v14 variable bridges (auto-adapt old pages) --- */ --bg-0: #040608; --bg-1: #040608; --bg-2: #040608; --bg-3: #1B262E; --bg: #040608; --bg-muted: #040608; --bg-graphite: #10171C; --surface: #10171C; --text: #F5F7FB; --text-heading: #F5F7FB; --dark-gray: #E4C35A; --muted: #C9A227; --white: #151F26; --navy: #10171C; --navy-mid: #151F26; --border: rgba(255, 255, 255, 0.08); --border-light: rgba(255, 255, 255, 0.08); --border-0: rgba(255, 255, 255, 0.08); --border-1: rgba(255, 255, 255, 0.14); --line: rgba(255, 255, 255, 0.08); --glass: rgba(16, 23, 28, 0.75); --glass-border: rgba(255, 255, 255, 0.08); --accent: #2F6BFF; --accent-a: #2F6BFF; --accent-b: #2F6BFF; --accent-c: #C9A227; --teal: #2F6BFF; --glow: 0 0 40px rgba(212, 175, 55, 0.15); --gold-hover: #A87C1F; --gold-light: rgba(212, 175, 55, 0.25); --blue-light: rgba(47, 107, 255, 0.15); --off-white: #151F26; --gray-100: #151F31; --gray-300: #3B4A63; --gray-500: #C9A227; --gray-700: #E4C35A; --shadow: 0 4px 16px rgba(0, 0, 0, 0.35); --card: #101725; --code-bg: #0D1117; --code-text: #E6EDF3; /* -- Dark-mode parity tokens (fix 2026-05-14) ----------------- Every token that exists in any LIGHT theme MUST exist here too, otherwise pages using var(--name, FALLBACK) with a light-coloured fallback will render the FALLBACK on dark backgrounds and produce unreadable dark-text-on-dark-bg. NEVER REMOVE THESE. */ --text-body: #C7D2E0; --text-heading-alt: #F5F7FB; --muted-fg: #8A93A3; --subtle: rgba(255,255,255,0.6); --ink: #F5F7FB; --surface-deep: #151F26; --surface-deeper: #1B262E; --border-soft: rgba(255,255,255,0.08); --rule: rgba(255,255,255,0.10); --good: #34D399; --good-soft: rgba(52,211,153,0.14); --warn: #FBBF24; --warn-soft: rgba(251,191,36,0.14); --bad: #F87171; --bad-soft: rgba(248,113,113,0.14); --review: #93C5FD; --review-soft: rgba(147,197,253,0.14); --navy-soft: rgba(47,107,255,0.14); --gold-soft-bg: rgba(228,195,90,0.14); --text-inverse: #0F172A; } /* ---------------------------------------------------------------- 3. SOVEREIGN LIGHT THEME (jilsovereign.com - v2 pages) Clean institutional fintech. Warm off-white with blue + gold. ---------------------------------------------------------------- */ [data-theme="sovereign-light"] { color-scheme: light; /* WCAG AA eyebrow contrast (fix 2026-05-14). NEVER REMOVE. */ --label-eyebrow: #7C5F18; /* -- Backgrounds (CSS Guidance: light, premium fintech) --------- */ --bg-page: #F7FAFC; --bg-main: #F7FAFC; --bg-surface: #FFFFFF; --bg-section: #FFFFFF; --bg-elevated: #FFFFFF; --bg-soft: #EEF4FA; --bg-overlay: rgba(247, 250, 252, 0.92); /* -- Text (blue-gray +50% for readability on light bg) ---------- */ --text-primary: #0F172A; --text-body: #2D3D52; --text-secondary: #2D3D52; --text-muted: #3A5A8C; --text-inverse: #F5F7FB; /* -- Navy authority color --------------------------------------- */ --navy-primary: #102A43; --navy: #102A43; --navy-mid: #1E293B; /* -- Blue accent (CSS Guidance: electric blue for action) -------- */ --blue: #2563EB; --blue-accent: #2563EB; --blue-soft: #60A5FA; --blue-glow: #D9ECFF; --blue-aura: #D9ECFF; --blue-deep: #1E40AF; --blue-hover: #1D4ED8; --blue-accent-hover: #1D4ED8; --blue-tint: rgba(37, 99, 235, 0.08); /* -- Borders (CSS Guidance: soft separators) --------------------- */ --border-subtle: #D9E2EC; --border-soft: #D9E2EC; --border-strong: #CBD5E1; --divider: #D9E2EC; /* -- Shadows --------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 24px rgba(16, 42, 67, 0.04); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.08); --shadow-glow-gold: 0 2px 12px rgba(201, 162, 39, 0.15); --shadow-glow-blue: 0 4px 16px rgba(37, 99, 235, 0.12); /* -- Card presets (CSS Guidance: minimal, editorial) ------------- */ --card-bg: #FFFFFF; --card-border: #D9E2EC; --card-blur: none; --card-shadow: 0 8px 24px rgba(16, 42, 67, 0.04); --card-premium-bg: linear-gradient(135deg, rgba(201,162,39,0.06) 0%, rgba(201,162,39,0.02) 100%); --card-premium-border: rgba(201, 162, 39, 0.2); --card-premium-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); /* -- Page gradients (CSS Guidance: soft blue glow hero) ---------- */ --gradient-hero: radial-gradient(circle at 50% 35%, rgba(217, 236, 255, 0.9), transparent 48%), linear-gradient(to bottom, #FFFFFF, #F7FAFC); --gradient-section: linear-gradient(180deg, #FFFFFF 0%, #F7FAFC 100%); --gradient-blue-glow: radial-gradient(circle, rgba(217, 236, 255, 0.5) 0%, rgba(217, 236, 255, 0) 60%); /* -- Scrollbar ------------------------------------------------- */ --scrollbar-thumb: rgba(148, 163, 184, 0.4); --scrollbar-thumb-hover: rgba(148, 163, 184, 0.6); /* -- Glass ----------------------------------------------------- */ --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(0, 0, 0, 0.06); --glass-blur: blur(20px); /* -- Cinematic background layers (disabled for light theme) --- */ --cinematic-base: none; --cinematic-grid-color: transparent; --cinematic-grid-size: 60px; --cinematic-overlay: none; --cinematic-hero-glow: none; --cinematic-glass-bg: #FFFFFF; --cinematic-glass-border: #D9E2EC; --cinematic-glass-blur: none; --cinematic-enabled: 0; /* -- Legacy jil-v14 variable bridges (auto-adapt old pages) --- */ --bg-0: #F7FAFC; --bg-1: #FFFFFF; --bg-2: #F7FAFC; --bg-3: #EEF4FA; --bg: #F7FAFC; --bg-muted: #EEF4FA; --bg-graphite: #102A43; --surface: #FFFFFF; --text: #0F172A; --text-heading: #0F172A; --dark-gray: #2D3D52; --muted: #3A5A8C; --white: #FFFFFF; --border: #D9E2EC; --border-light: #D9E2EC; --border-0: #D9E2EC; --border-1: #CBD5E1; --line: #D9E2EC; --glass: rgba(255, 255, 255, 0.85); --accent: #2563EB; --accent-a: #2563EB; --accent-b: #2563EB; --accent-c: #3A5A8C; --teal: #2563EB; --glow: 0 0 40px rgba(37, 99, 235, 0.12); --gold-hover: #A87C1F; --gold-light: rgba(201, 162, 39, 0.20); --blue-light: rgba(37, 99, 235, 0.10); --off-white: #EEF4FA; --gray-100: #EEF4FA; --gray-300: #CBD5E1; --gray-500: #3A5A8C; --gray-700: #2D3D52; --shadow: 0 8px 24px rgba(16, 42, 67, 0.04); --card: #FFFFFF; --code-bg: #1E293B; --code-text: #E2E8F0; } /* ---------------------------------------------------------------- 4. GETJIL DARK THEME (getjil.com + wallet app) Deep navy-black base with warm gold accents. ---------------------------------------------------------------- */ [data-theme="getjil"] { color-scheme: dark; /* WCAG AA eyebrow contrast (fix 2026-05-14). NEVER REMOVE. */ --label-eyebrow: #E6C76A; /* -- Backgrounds (deep navy-black with warm undertone) ---------- */ --bg-page: #080B12; --bg-surface: #0E1219; --bg-elevated: #151A24; --bg-soft: #1C2230; --bg-overlay: rgba(8, 11, 18, 0.88); /* -- Text (gold on dark for readability) ------------------------ */ --text-primary: #FFFFFF; --text-secondary: #E4C35A; --text-muted: #C9A227; --text-inverse: #0E1219; /* -- Blue is intentionally absent. Gold is the sole accent. ---- */ /* Map --blue to gold so shared components still work. */ --blue: #D4AF37; --blue-soft: #E6C76A; --blue-glow: #F2D47A; --blue-deep: #A87C1F; --blue-hover: #B8960C; --blue-tint: rgba(212, 175, 55, 0.12); /* -- Borders --------------------------------------------------- */ --border-subtle: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.12); --divider: rgba(198, 200, 204, 0.14); /* -- Shadows --------------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5); --shadow-glow-gold: 0 0 24px rgba(212, 175, 55, 0.18); --shadow-glow-blue: 0 0 24px rgba(212, 175, 55, 0.12); /* -- Card presets ---------------------------------------------- */ --card-bg: rgba(255, 255, 255, 0.04); --card-border: rgba(255, 255, 255, 0.07); --card-blur: blur(18px); --card-shadow: 0 20px 60px rgba(0, 0, 0, 0.30); --card-premium-bg: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); --card-premium-border: rgba(212, 175, 55, 0.18); --card-premium-shadow: 0 0 0 1px rgba(212,175,55,0.06), 0 20px 60px rgba(0,0,0,0.35); /* -- Page gradients -------------------------------------------- */ --gradient-hero: radial-gradient(circle at 50% -5%, rgba(212, 175, 55, 0.14), transparent 26%), radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.04), transparent 18%), linear-gradient(180deg, #0E1219 0%, #0A0E16 55%, #080B12 100%); --gradient-section: linear-gradient(180deg, #0E1219 0%, #080B12 100%); --gradient-blue-glow: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0) 65%); /* -- Scrollbar ------------------------------------------------- */ --scrollbar-thumb: rgba(212, 175, 55, 0.3); --scrollbar-thumb-hover: rgba(212, 175, 55, 0.5); /* -- Glass ----------------------------------------------------- */ --glass-bg: rgba(14, 18, 28, 0.80); --glass-border: rgba(255, 255, 255, 0.07); --glass-blur: blur(18px); /* -- Grid texture (subtle background lines) -------------------- */ --bg-grid: linear-gradient(rgba(212, 175, 55, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 175, 55, 0.06) 1px, transparent 1px); /* -- Cinematic background layers ------------------------------ */ --cinematic-base: radial-gradient(ellipse at 20% 30%, rgba(212, 175, 55, 0.55) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(212, 175, 55, 0.42) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(47, 80, 160, 0.03) 0%, transparent 60%), linear-gradient(170deg, #04070D 0%, #080B14 40%, #060910 100%); --cinematic-grid-color: rgba(212, 175, 55, 0.08); --cinematic-grid-size: 60px; --cinematic-overlay: linear-gradient(180deg, rgba(4, 7, 13, 0.40) 0%, rgba(8, 11, 18, 0.50) 50%, rgba(4, 7, 13, 0.55) 100%); --cinematic-hero-glow: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.55) 0%, transparent 60%); --cinematic-glass-bg: rgba(255, 255, 255, 0.03); --cinematic-glass-border: rgba(255, 255, 255, 0.06); --cinematic-glass-blur: blur(20px); --cinematic-enabled: 1; /* -- Legacy jil-v14 variable bridges (auto-adapt old pages) --- */ --bg-0: #080B12; --bg-1: #080B12; --bg-2: #080B12; --bg-3: #1C2230; --bg: #080B12; --bg-muted: #080B12; --bg-graphite: #0E1219; --surface: #0E1219; --text: #FFFFFF; --text-heading: #FFFFFF; --dark-gray: #E4C35A; --muted: #C9A227; --white: #151A24; --navy: #0E1219; --navy-mid: #151A24; --border: rgba(255, 255, 255, 0.07); --border-light: rgba(255, 255, 255, 0.07); --border-0: rgba(255, 255, 255, 0.07); --border-1: rgba(255, 255, 255, 0.12); --line: rgba(255, 255, 255, 0.07); --glass: rgba(14, 18, 28, 0.80); --accent: #D4AF37; --accent-a: #D4AF37; --accent-b: #D4AF37; --accent-c: #C9A227; --teal: #D4AF37; --glow: 0 0 40px rgba(212, 175, 55, 0.15); --gold-hover: #B8960C; --gold-light: rgba(212, 175, 55, 0.25); --blue-light: rgba(212, 175, 55, 0.15); /* -- Dark-mode parity tokens (fix 2026-05-14) ----------------- See sovereign-dark for the rule. NEVER REMOVE. */ --text-body: #D4D4D8; --text-heading-alt: #FFFFFF; --muted-fg: #9CA3AF; --subtle: rgba(255,255,255,0.6); --ink: #FFFFFF; --surface-deep: #151A24; --surface-deeper: #1C2230; --border-soft: rgba(255,255,255,0.07); --rule: rgba(255,255,255,0.10); --good: #34D399; --good-soft: rgba(52,211,153,0.14); --warn: #FBBF24; --warn-soft: rgba(251,191,36,0.14); --bad: #F87171; --bad-soft: rgba(248,113,113,0.14); --review: #FCD34D; --review-soft: rgba(252,211,77,0.14); --navy-soft: rgba(212,175,55,0.14); --gold-soft-bg: rgba(228,195,90,0.14); --text-inverse: #0E1219; } /* ---------------------------------------------------------------- 5. WALLET V3 THEME (wallet.getjil.com - light) Light fintech wallet, aligned with sovereign-light brand. ---------------------------------------------------------------- */ [data-theme="wallet-v3"] { color-scheme: light; /* WCAG AA eyebrow contrast (fix 2026-05-14). NEVER REMOVE. */ --label-eyebrow: #7C5F18; /* Banking-grade light theme - stronger contrast, richer tones */ --bg-page: #EFF2F7; --bg-surface: #FFFFFF; --bg-elevated: #FFFFFF; --bg-soft: #E8ECF3; --bg-overlay: rgba(239, 242, 247, 0.94); --text-primary: #0F1729; --text-secondary: #2D3A4E; --text-muted: #546A8D; --text-inverse: #F5F7FB; --navy-primary: #0A1E36; --blue: #1A56DB; --blue-soft: #4B8BF5; --blue-glow: #C8DFFF; --blue-deep: #153E8A; --blue-hover: #1648B8; --blue-tint: rgba(26, 86, 219, 0.10); --border-subtle: #D0D7E2; --border-strong: #B0BAC9; --divider: #D0D7E2; --shadow-sm: 0 1px 3px rgba(15, 23, 41, 0.08); --shadow-md: 0 4px 14px rgba(15, 23, 41, 0.10); --shadow-lg: 0 8px 28px rgba(15, 23, 41, 0.12); --shadow-xl: 0 20px 60px rgba(15, 23, 41, 0.14); --shadow-glow-gold: 0 2px 14px rgba(180, 140, 30, 0.20); --shadow-glow-blue: 0 4px 18px rgba(26, 86, 219, 0.16); --card-bg: #FFFFFF; --card-border: #C8D0DC; --card-blur: none; --card-shadow: 0 1px 4px rgba(15, 23, 41, 0.08); --card-premium-bg: linear-gradient(135deg, rgba(180,140,30,0.08) 0%, rgba(180,140,30,0.03) 100%); --card-premium-border: rgba(180, 140, 30, 0.28); --card-premium-shadow: 0 4px 22px rgba(15, 23, 41, 0.08); --gradient-hero: linear-gradient(165deg, #E4E9F2 0%, #DAE1EE 35%, #EDE9DF 100%); --gradient-section: linear-gradient(180deg, #FFFFFF 0%, #EFF2F7 100%); --gradient-blue-glow: radial-gradient(circle, rgba(200, 223, 255, 0.45) 0%, rgba(200, 223, 255, 0) 60%); --scrollbar-thumb: rgba(120, 138, 165, 0.45); --scrollbar-thumb-hover: rgba(120, 138, 165, 0.65); --glass-bg: rgba(255, 255, 255, 0.90); --glass-border: rgba(15, 23, 41, 0.08); --glass-blur: blur(20px); --cinematic-base: none; --cinematic-grid-color: transparent; --cinematic-grid-size: 60px; --cinematic-overlay: none; --cinematic-hero-glow: none; --cinematic-glass-bg: #FFFFFF; --cinematic-glass-border: #D0D7E2; --cinematic-glass-blur: none; --cinematic-enabled: 0; /* Sidebar (wallet-specific) - deeper navy */ --sidebar-bg: #0A1628; --sidebar-text: #D4DAE5; --sidebar-active: var(--gold, #C9A227); /* V3 interaction color (hover/focus accent for buttons, inputs) */ --v3-interaction: #B48C1E; /* V3 Sidebar (deep banking navy - SideNav/AppShell) */ --v3-sidebar-bg: #06101F; --v3-sidebar-text: #B8C4D8; --v3-sidebar-text-muted: #5A6D88; --v3-sidebar-text-active: #F0F4FA; --v3-sidebar-hover: rgba(255, 255, 255, 0.07); --v3-sidebar-active: rgba(180, 140, 30, 0.14); --v3-sidebar-active-border: #B48C1E; /* Section title (FEATURES / FINANCIAL TOOLS / SECURITY / ACCOUNT etc). Must be readable on the --v3-sidebar-bg (deep navy). Muted gold so it reads as a section header but does not compete with the active item color. Previously undefined -> inherited near-black, which created the black-on-black sidebar bug. */ --v3-sidebar-section-title: #C9A227; /* Admin Dashboard (dark panel) */ --admin-bg: #06101F; --admin-surface: #0F1E35; --admin-text-secondary: #8B9BB5; --admin-text-muted: #5A6D88; /* Legacy bridges */ --bg-0: #EFF2F7; --bg-1: #FFFFFF; --bg-2: #EFF2F7; --bg-3: #E8ECF3; --bg: #EFF2F7; --bg-muted: #E8ECF3; --surface: #FFFFFF; --text: #0F1729; --text-heading: #0A1628; --dark-gray: #2D3A4E; --muted: #546A8D; --white: #FFFFFF; --navy: #0A1628; --border: #D0D7E2; --border-light: #D0D7E2; --line: #D0D7E2; --accent: #1A56DB; --shadow: 0 1px 4px rgba(15, 23, 41, 0.08); --card: #FFFFFF; --code-bg: #0F1E35; --code-text: #D4DAE5; } /* ---------------------------------------------------------------- 6. SHARED COMPONENT CLASSES These use token vars so they adapt to any theme automatically. ---------------------------------------------------------------- */ /* -- Standard card ---------------------------------------------- */ .jil-card { background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); box-shadow: var(--card-shadow); border-radius: var(--radius-lg); transition: box-shadow var(--transition), border-color var(--transition); } .jil-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border-strong); } /* -- Premium card ----------------------------------------------- */ .jil-card-premium { background: var(--card-premium-bg); border: 1px solid var(--card-premium-border); box-shadow: var(--card-premium-shadow); border-radius: var(--radius-lg); } /* -- Glass panel ------------------------------------------------ */ .jil-glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); } /* -- Gold button ------------------------------------------------ */ .jil-btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--gradient-gold); color: var(--text-on-gold); font-weight: 700; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); border: none; cursor: pointer; text-decoration: none; transition: all var(--transition); box-shadow: var(--shadow-glow-gold); } .jil-btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(212, 175, 55, 0.35); } /* -- Primary button (adapts: blue on sovereign, gold on getjil) - */ .jil-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--blue); /* white on the blue fill -- never the dark --text-primary, which renders dark-on-blue in the sovereign-light theme. getjil (gold fill) overrides below. */ color: #FFFFFF; font-weight: 600; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); border: none; cursor: pointer; text-decoration: none; transition: all var(--transition); } [data-theme="getjil"] .jil-btn-primary { color: var(--text-on-gold); } .jil-btn-primary:hover { background: var(--blue-hover); transform: translateY(-1px); } /* -- Outline button --------------------------------------------- */ .jil-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: transparent; color: var(--text-primary); font-weight: 600; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); cursor: pointer; text-decoration: none; transition: all var(--transition); } .jil-btn-outline:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); } /* -- Badge ------------------------------------------------------ */ .jil-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-full); background: var(--blue-tint); color: var(--blue); } .jil-badge-gold { background: var(--gold-tint); color: var(--gold); } /* -- Scrollbar -------------------------------------------------- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* -- Selection -------------------------------------------------- */ [data-theme="sovereign-dark"] ::selection, [data-theme="sovereign-light"] ::selection { background: rgba(47, 107, 255, 0.18); } [data-theme="getjil"] ::selection { background: rgba(212, 175, 55, 0.18); } /* -- Theme toggle button ---------------------------------------- */ .jil-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); transition: color var(--transition), border-color var(--transition), background var(--transition); padding: 0; flex-shrink: 0; } .jil-theme-toggle:hover { color: var(--gold); border-color: var(--gold-border); background: var(--gold-tint); }