/* ========================================================================= CleverAlpha Securities — Core Design Tokens Strict adherence to CleverAlpha Design System (V1.0) Full Mirror-Image Architecture for Day and Night Modes WCAG AAA Compliant Contrast, Modular Type Scale, and Radius = 0 ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Lato:wght@300;400;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ------------------------------------------------------------------------- 01 · DAY MODE (Default Active Theme) Crisp, architectural, high-contrast institutional light theme ------------------------------------------------------------------------- */ :root, [data-theme="day"] { /* Surfaces */ --bg-canvas: #F4F6F8; --bg-card: #FFFFFF; --bg-elevated: #FFFFFF; --bg-subtle: #F8FAFC; --bg-hover: #F1F5F9; --bg-input: #FFFFFF; /* Borders */ --border-color: #E2E8F0; --border-medium: #CBD5E1; --border-strong: #94A3B8; /* Text & Typography (High Contrast Obsidian / Charcoal) */ --text-primary: #0F172A; /* Primary Headings & Figures */ --text-secondary: #334155; /* Secondary Body & Labels */ --text-muted: #64748B; /* Tertiary & Captions */ --text-disabled: #94A3B8; --text-inverted: #FFFFFF; /* Brand Accents (Calibrated for > 5:1 WCAG AAA Contrast on Light) */ --color-jade: #0D7A68; /* High-Contrast Jade */ --text-on-jade: #FFFFFF; /* 5.3:1 on jade */ --text-on-gold: #FFFFFF; /* 5.6:1 on gold */ --color-jade-hover: #09594C; --color-jade-dim: rgba(13, 122, 104, 0.08); --color-jade-border: rgba(13, 122, 104, 0.35); --color-gold: #8C6500; /* Institutional Amber-Gold */ --color-gold-hover: #6D4F00; --color-gold-dim: rgba(140, 101, 0, 0.08); --color-gold-border: rgba(140, 101, 0, 0.35); --color-danger: #DC2626; --color-danger-dim: rgba(220, 38, 38, 0.08); --color-info: #2563EB; --color-info-dim: rgba(37, 99, 235, 0.08); /* Component Surface Roles */ --header-bg: #FFFFFF; --status-bar-bg: #F8FAFC; --footer-bg: #FFFFFF; --modal-bg: #FFFFFF; --modal-overlay-bg: rgba(15, 23, 42, 0.65); --table-head-bg: #F8FAFC; --table-row-bg: #FFFFFF; --table-hover-bg: #F8FAFC; --table-border: #F1F5F9; /* Backward Compatible Semantic Aliases */ --bg: var(--bg-canvas); --bg-elevated: var(--bg-elevated); --bg-card: var(--bg-card); --bg-hover: var(--bg-hover); --fg: var(--text-primary); --fg-muted: var(--text-secondary); --fg-subtle: var(--text-muted); --ca-black: var(--bg-canvas); --ca-white: var(--text-primary); --ca-ink-900: var(--bg-subtle); --ca-ink-800: var(--bg-card); --ca-ink-700: var(--bg-hover); --ca-ink-600: var(--border-color); --ca-ink-500: var(--border-medium); --ca-ink-400: var(--border-strong); --ca-ink-300: var(--text-muted); --ca-ink-200: var(--text-secondary); --ca-ink-100: var(--text-primary); --ca-jade: var(--color-jade); --ca-jade-hover: var(--color-jade-hover); --ca-jade-dim: var(--color-jade-dim); --ca-gold: var(--color-gold); --ca-gold-hover: var(--color-gold-hover); --ca-gold-dim: var(--color-gold-dim); --ca-danger: var(--color-danger); --ca-danger-dim: var(--color-danger-dim); --ca-info: var(--color-info); --ca-info-dim: var(--color-info-dim); --border: var(--border-color); --border-strong: var(--border-medium); --border-subtle: var(--border-color); } /* ------------------------------------------------------------------------- 02 · NIGHT MODE (Available via Sun / Crescent Moon Toggle) CleverAlpha signature true black (#000000) canvas ------------------------------------------------------------------------- */ [data-theme="night"] { /* Surfaces */ --bg-canvas: #000000; --bg-card: #111111; --bg-elevated: #161616; --bg-subtle: #0D0D0D; --bg-hover: #1F1F1F; --bg-input: #0D0D0D; /* Borders */ --border-color: #222222; --border-medium: #333333; --border-strong: #555555; /* Text & Typography (True White & Silver Grays) */ --text-primary: #FFFFFF; --text-secondary: #A8A8A8; --text-muted: #71717A; --text-disabled: #555555; --text-inverted: #000000; /* Brand Accents */ --color-jade: #40C1AC; --text-on-jade: #0A0A0A; /* 9.5:1 on jade */ --text-on-gold: #0A0A0A; /* 9.4:1 on gold */ --color-jade-hover: #4FD4BE; --color-jade-dim: rgba(64, 193, 172, 0.14); --color-jade-border: rgba(64, 193, 172, 0.40); --color-gold: #D4AF37; --color-gold-hover: #E5C25A; --color-gold-dim: rgba(212, 175, 55, 0.14); --color-gold-border: rgba(212, 175, 55, 0.40); --color-danger: #EF4444; --color-danger-dim: rgba(239, 68, 68, 0.14); --color-info: #60A5FA; --color-info-dim: rgba(96, 165, 250, 0.14); /* Component Surface Roles */ --header-bg: rgba(10, 10, 10, 0.96); --status-bar-bg: #0A0A0A; --footer-bg: #080808; --modal-bg: #111111; --modal-overlay-bg: rgba(0, 0, 0, 0.85); --table-head-bg: #141414; --table-row-bg: #111111; --table-hover-bg: #1A1A1A; --table-border: #1D1D1D; /* Backward Compatible Semantic Aliases */ --bg: var(--bg-canvas); --bg-elevated: var(--bg-elevated); --bg-card: var(--bg-card); --bg-hover: var(--bg-hover); --fg: var(--text-primary); --fg-muted: var(--text-secondary); --fg-subtle: var(--text-muted); --ca-black: var(--bg-canvas); --ca-white: var(--text-primary); --ca-ink-900: var(--bg-subtle); --ca-ink-800: var(--bg-card); --ca-ink-700: var(--bg-hover); --ca-ink-600: var(--border-color); --ca-ink-500: var(--border-medium); --ca-ink-400: var(--border-strong); --ca-ink-300: var(--text-muted); --ca-ink-200: var(--text-secondary); --ca-ink-100: var(--text-primary); --ca-jade: var(--color-jade); --ca-jade-hover: var(--color-jade-hover); --ca-jade-dim: var(--color-jade-dim); --ca-gold: var(--color-gold); --ca-gold-hover: var(--color-gold-hover); --ca-gold-dim: var(--color-gold-dim); --ca-danger: var(--color-danger); --ca-danger-dim: var(--color-danger-dim); --ca-info: var(--color-info); --ca-info-dim: var(--color-info-dim); --border: var(--border-color); --border-strong: var(--border-medium); --border-subtle: var(--border-color); } /* ------------------------------------------------------------------------- 03 · TYPOGRAPHY PRIMITIVES & MODULAR SCALE (1.25 ratio on 16px base) ------------------------------------------------------------------------- */ :root { --font-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-body: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-accent: 'Lato', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --fs-12: 0.75rem; /* 12px Eyebrow / Tagline */ --fs-14: 0.875rem; /* 14px Small / Table / Labels */ --fs-16: 1rem; /* 16px Body default */ --fs-18: 1.125rem; /* 18px */ --fs-20: 1.25rem; /* 20px H4 / Card lead */ --fs-24: 1.5rem; /* 24px H3 / Subsection */ --fs-32: 2rem; /* 32px */ --fs-40: 2.5rem; /* 40px H2 / Section title */ --fs-56: 3.5rem; /* 56px H1 / Page title */ --fs-72: 4.5rem; /* 72px Hero KPI numeral */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.16em; --tracking-widest: 0.24em; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; /* ----------------------------------------------------------------------- STRICT BRAND DIRECTIVE: RADIUS = 0 EVERYWHERE ----------------------------------------------------------------------- */ --radius: 0px !important; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --dur-fast: 120ms; --dur-base: 200ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); }