/* ============================================================ Design tokens — Finance USDT Tracker Dark is the default; light via . Legacy aliases (--color-*, --bg-*, --text-*) keep old page CSS working. ============================================================ */ :root, [data-bs-theme="dark"] { color-scheme: dark; --surface-0: #0b1019; /* page background */ --surface-1: #111827; /* cards, sidebar */ --surface-2: #182236; /* elevated / hover */ --surface-3: #212d45; /* active */ --border: #233049; --border-strong: #324260; --text-1: #f1f5f9; --text-2: #aab6c8; --text-3: #8592a8; --brand: #00d395; --brand-hover: #2fe2ab; --brand-ink: #03261b; --brand-soft: rgba(0, 211, 149, .13); --pos: #34d399; --neg: #f87171; --warn: #fbbf24; --info: #60a5fa; --neutral: #94a3b8; --pos-bg: rgba(52,211,153,.14); --neg-bg: rgba(248,113,113,.14); --warn-bg: rgba(251,191,36,.16); --info-bg: rgba(96,165,250,.16); --radius-1: 6px; --radius-2: 10px; --radius-3: 14px; --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 8px 24px rgba(0,0,0,.35); /* --- scale tokens (MASTER.md §4-5, §8) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 300ms; --ease: cubic-bezier(.2,.7,.3,1); --z-sticky: 20; --z-topbar: 1030; --z-sidebar: 1040; --z-modal: 1055; --z-toast: 1090; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --target-min: 24px; --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--brand); --sidebar-w: 248px; --sidebar-w-collapsed: 68px; --topbar-h: 56px; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --- legacy aliases used by existing page templates --- */ --color-primary: var(--brand); --color-primary-dark: #00a67a; --color-primary-light: var(--brand-hover); --color-surface: var(--surface-0); --color-surface-alt: var(--surface-1); --color-surface-elevated: var(--surface-2); --color-border: var(--border); --color-border-light: var(--border-strong); --color-text: var(--text-1); --color-text-muted: var(--text-2); --color-text-dim: var(--text-3); --color-success: var(--pos); --color-warning: var(--warn); --color-danger: var(--neg); --color-info: var(--info); --radius-sm: var(--radius-1); --radius-md: var(--radius-2); --radius-lg: var(--radius-3); --shadow-sm: var(--shadow-1); --shadow-md: var(--shadow-2); --shadow-elevated: var(--shadow-2); --primary-color: var(--brand); --secondary-color: #00a67a; --accent-color: var(--brand); --bg-dark: var(--surface-0); --bg-card: var(--surface-1); --text-primary: var(--text-1); --text-secondary: var(--text-2); --border-color: var(--border); /* --- Bootstrap 5.3 bridge --- */ --bs-body-bg: var(--surface-0); --bs-body-color: var(--text-1); --bs-body-font-family: var(--font-sans); --bs-border-color: var(--border); --bs-border-color-translucent: var(--border); --bs-secondary-color: var(--text-2); --bs-tertiary-color: var(--text-3); --bs-secondary-bg: var(--surface-1); --bs-tertiary-bg: var(--surface-2); --bs-emphasis-color: var(--text-1); --bs-heading-color: var(--text-1); --bs-primary: var(--brand); --bs-primary-rgb: 0, 211, 149; --bs-link-color: var(--brand); --bs-link-hover-color: var(--brand-hover); --bs-link-color-rgb: 0, 211, 149; --bs-link-hover-color-rgb: 47, 226, 171; --bs-success: var(--pos); --bs-success-rgb: 52, 211, 153; --bs-danger: var(--neg); --bs-danger-rgb: 248, 113, 113; --bs-warning: var(--warn); --bs-warning-rgb: 251, 191, 36; --bs-info: var(--info); --bs-info-rgb: 96, 165, 250; --bs-form-control-bg: var(--surface-0); } [data-bs-theme="light"] { color-scheme: light; --surface-0: #f4f6fa; --surface-1: #ffffff; --surface-2: #eef2f7; --surface-3: #e3e9f1; --border: #dce3ec; --border-strong: #c6d0dd; --text-1: #0f172a; --text-2: #475569; --text-3: #64748b; --brand: #00a67a; --brand-hover: #008f69; --brand-ink: #ffffff; --brand-soft: rgba(0,166,122,.12); --pos: #16a34a; --neg: #dc2626; --warn: #d97706; --info: #2563eb; --neutral: #64748b; --pos-bg: rgba(22,163,74,.12); --neg-bg: rgba(220,38,38,.10); --warn-bg: rgba(217,119,6,.12); --info-bg: rgba(37,99,235,.12); --shadow-1: 0 1px 2px rgba(15,23,42,.08); --shadow-2: 0 8px 24px rgba(15,23,42,.10); --color-primary-dark: #007f5e; --bs-primary-rgb: 0, 166, 122; --bs-link-color-rgb: 0, 166, 122; --bs-link-hover-color-rgb: 0, 143, 105; --bs-success-rgb: 22, 163, 74; --bs-danger-rgb: 220, 38, 38; --bs-warning-rgb: 217, 119, 6; --bs-info-rgb: 37, 99, 235; }