/* ============================================================ * Finance Control Console — Design Tokens (v2) * ------------------------------------------------------------ * Single source of truth for every visual decision. Only new * pages (those extending base_v2.html) consume these tokens. * Existing `styles.css` tokens (--bg, --text, ...) continue to * drive legacy pages and are NOT affected by this file. * * Naming convention: ---- * --color-brand-* brand / primary * --color-semantic-* success / warning / danger / info * --color-surface-* backgrounds * --color-text-* foregrounds * --color-border-* borders * --font-* typography * --space-* spacing (4px base) * --radius-* corner radius * --shadow-* elevation * --duration-* motion * --ease-* motion curves * * Dark mode: auto via prefers-color-scheme AND manual override * via data-theme="dark" on . * ============================================================ */ :root { /* -------------------- Brand -------------------- */ --color-brand-primary: #2d6ff5; --color-brand-primary-hover: #2558cc; --color-brand-primary-active: #1f48a3; --color-brand-primary-soft: #e7efff; --color-brand-secondary: #9b4dff; /* -------------------- Semantic (signals) -------------------- */ --color-success-500: #16a34a; --color-success-600: #15803d; --color-success-soft: #dcfce7; --color-success-text: #166534; --color-warning-500: #f59e0b; --color-warning-600: #d97706; --color-warning-soft: #fef3c7; --color-warning-text: #92400e; --color-danger-500: #dc2626; --color-danger-600: #b91c1c; --color-danger-soft: #fee2e2; --color-danger-text: #991b1b; --color-info-500: #3b82f6; --color-info-600: #2563eb; --color-info-soft: #dbeafe; --color-info-text: #1e40af; /* -------------------- Surfaces (light mode) -------------------- */ --color-surface-0: #ffffff; /* page background */ --color-surface-1: #fafafa; /* slightly raised */ --color-surface-2: #f4f4f5; /* inset / muted panel */ --color-surface-3: #e4e4e7; /* deeper inset */ --color-surface-overlay: rgb(0 0 0 / 0.4); /* modal backdrop */ /* -------------------- Text (light mode) -------------------- */ --color-text-primary: #09090b; /* body text */ --color-text-secondary: #52525b; /* muted */ --color-text-tertiary: #a1a1aa; /* subtle */ --color-text-inverse: #ffffff; /* on dark surface */ --color-text-link: var(--color-brand-primary); /* -------------------- Borders (light mode) -------------------- */ --color-border-subtle: #e4e4e7; --color-border-default: #d4d4d8; --color-border-strong: #a1a1aa; --color-border-focus: var(--color-brand-primary); /* -------------------- Typography -------------------- */ --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Menlo", "Monaco", "Consolas", monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Type scale — minor third (1.2) with a small-screen clamp where needed */ --font-size-xs: 0.75rem; /* 12px — badges, small labels */ --font-size-sm: 0.875rem; /* 14px — secondary text */ --font-size-base: 1rem; /* 16px — body */ --font-size-lg: 1.125rem; /* 18px — large body */ --font-size-xl: 1.25rem; /* 20px — section heading */ --font-size-2xl: 1.5rem; /* 24px — panel heading */ --font-size-3xl: 1.875rem; /* 30px — page heading */ --font-size-4xl: 2.25rem; /* 36px — KPI value */ --font-size-5xl: 3rem; /* 48px — hero KPI */ --line-height-tight: 1.15; /* headings */ --line-height-snug: 1.35; --line-height-normal: 1.5; /* body */ --line-height-relaxed: 1.7; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.02em; /* -------------------- Spacing (4px base) -------------------- */ --space-0: 0; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* -------------------- Radii -------------------- */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px — inline elements */ --radius-md: 0.5rem; /* 8px — inputs, small cards */ --radius-lg: 0.75rem; /* 12px — cards, panels */ --radius-xl: 1rem; /* 16px — large panels */ --radius-2xl: 1.5rem; /* 24px — hero cards */ --radius-full: 9999px; /* -------------------- Shadows (subtle — this is a financial tool) -------------------- */ --shadow-none: 0 0 #0000; --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.05); --shadow-focus: 0 0 0 3px rgb(45 111 245 / 0.25); /* brand-primary @ 25% */ /* -------------------- Motion -------------------- */ --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 320ms; --duration-ambient: 8s; /* slow ambient animations (aurora drift, pulse) */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful elements */ --ease-glide: cubic-bezier(0.22, 1, 0.36, 1); /* smooth page fades */ /* -------------------- Gradients (premium fintech 2025) -------------------- */ --gradient-brand: linear-gradient(135deg, #2d6ff5 0%, #9b4dff 100%); --gradient-success: linear-gradient(135deg, #16a34a 0%, #06b6d4 100%); --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%); --gradient-danger: linear-gradient(135deg, #dc2626 0%, #f97316 100%); --gradient-hero: linear-gradient(135deg, #2d6ff5 0%, #9b4dff 50%, #ec4899 100%); --gradient-mesh-light: radial-gradient(at 0% 0%, rgba(45,111,245,0.08) 0px, transparent 50%), radial-gradient(at 100% 0%, rgba(155,77,255,0.06) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(236,72,153,0.05) 0px, transparent 50%), radial-gradient(at 0% 100%, rgba(6,182,212,0.05) 0px, transparent 50%); --gradient-mesh-dark: radial-gradient(at 0% 0%, rgba(45,111,245,0.18) 0px, transparent 50%), radial-gradient(at 100% 0%, rgba(155,77,255,0.15) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(236,72,153,0.12) 0px, transparent 50%), radial-gradient(at 0% 100%, rgba(6,182,212,0.10) 0px, transparent 50%); /* -------------------- Glow + luminous effects -------------------- */ --glow-brand: 0 0 20px rgba(45, 111, 245, 0.35); --glow-brand-sm: 0 0 8px rgba(45, 111, 245, 0.25); --glow-success: 0 0 20px rgba(22, 163, 74, 0.30); --glow-warning: 0 0 20px rgba(245, 158, 11, 0.30); --glow-danger: 0 0 20px rgba(220, 38, 38, 0.30); /* -------------------- Glass (frosted) -------------------- */ --glass-blur: 24px; --glass-bg-light: rgba(255, 255, 255, 0.65); --glass-bg-dark: rgba(24, 24, 27, 0.55); --glass-border-light: rgba(255, 255, 255, 0.8); --glass-border-dark: rgba(255, 255, 255, 0.08); /* -------------------- Display typography (headings & KPI values) -------------------- */ --font-family-display: "Space Grotesk", "Inter", -apple-system, system-ui, sans-serif; /* -------------------- Layout -------------------- */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --topbar-height: 56px; --bottomnav-height: 64px; /* mobile */ --content-max-width: 1400px; --panel-padding: var(--space-6); /* -------------------- Z-index scale -------------------- */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; } /* ================================================================ * Dark mode — via OS preference OR explicit data-theme="dark" * ================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-surface-0: #0a0a0f; --color-surface-1: #13131a; --color-surface-2: #1c1c25; --color-surface-3: #2a2a35; --color-surface-overlay: rgb(0 0 0 / 0.7); --color-text-primary: #fafafa; --color-text-secondary: #a1a1aa; --color-text-tertiary: #71717a; --color-border-subtle: #1c1c25; --color-border-default: #2a2a35; --color-border-strong: #3f3f46; --color-brand-primary-soft: rgba(45, 111, 245, 0.12); --color-success-soft: rgba(22, 163, 74, 0.12); --color-warning-soft: rgba(245, 158, 11, 0.12); --color-danger-soft: rgba(220, 38, 38, 0.12); --color-info-soft: rgba(59, 130, 246, 0.12); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.3); --shadow-md: 0 4px 12px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-lg: 0 16px 24px -6px rgb(0 0 0 / 0.6), 0 8px 10px -4px rgb(0 0 0 / 0.4); --shadow-xl: 0 24px 40px -8px rgb(0 0 0 / 0.7), 0 8px 12px -6px rgb(0 0 0 / 0.4); } } :root[data-theme="dark"] { --color-surface-0: #0a0a0f; /* deeper for premium feel */ --color-surface-1: #13131a; --color-surface-2: #1c1c25; --color-surface-3: #2a2a35; --color-surface-overlay: rgb(0 0 0 / 0.7); --color-text-primary: #fafafa; --color-text-secondary: #a1a1aa; --color-text-tertiary: #71717a; --color-border-subtle: #1c1c25; --color-border-default: #2a2a35; --color-border-strong: #3f3f46; --color-brand-primary-soft: rgba(45, 111, 245, 0.12); --color-success-soft: rgba(22, 163, 74, 0.12); --color-warning-soft: rgba(245, 158, 11, 0.12); --color-danger-soft: rgba(220, 38, 38, 0.12); --color-info-soft: rgba(59, 130, 246, 0.12); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.3); --shadow-md: 0 4px 12px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-lg: 0 16px 24px -6px rgb(0 0 0 / 0.6), 0 8px 10px -4px rgb(0 0 0 / 0.4); --shadow-xl: 0 24px 40px -8px rgb(0 0 0 / 0.7), 0 8px 12px -6px rgb(0 0 0 / 0.4); } /* ================================================================ * Reduced motion — honour user preference * ================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }