/* ============================================================ Dealflow Alerts — design tokens Adapted from the bm-design-system principles. Two locked themes (light/dark) selected via [data-theme] on . ============================================================ */ :root, [data-theme="light"] { /* color — palette */ --color-page: #f8f5fc; --color-surface: #ffffff; --color-surface-elev: #fbfaff; --color-hairline: #ececec; --color-ink-display: #1a1a26; --color-ink-body: #363645; --color-ink-muted: #8a8a9a; --color-accent: #7868a6; --color-accent-faded: #ebe5fb; --color-accent-darker: #5a4d7e; /* color — signal */ --color-success: #1e8a3c; --color-success-faded: #defce0; --color-warning: #a37100; --color-warning-faded: #fff4d6; --color-danger: #c4302b; --color-danger-faded: #ffeaea; --color-info: #1f6fb8; --color-info-faded: #e3f1ff; } [data-theme="dark"] { --color-page: #0e0d18; --color-surface: #1a1925; --color-surface-elev: #232234; --color-hairline: #2d2c3a; --color-ink-display: #f4f4f8; --color-ink-body: #d0cfd9; --color-ink-muted: #7c7c8c; --color-accent: #9c8be0; --color-accent-faded: #2a2440; --color-accent-darker: #b6a8ef; --color-success: #4ade80; --color-success-faded: #143a22; --color-warning: #facc15; --color-warning-faded: #3a2e0a; --color-danger: #ef4444; --color-danger-faded: #3a1414; --color-info: #60a5fa; --color-info-faded: #14233a; } :root { /* typography */ --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 26px; --text-3xl: 34px; --text-4xl: 44px; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-loose: 1.7; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* spacing — 4px base scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* radii */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px; /* shadows */ --shadow-xs: 0 1px 2px rgba(20, 18, 40, 0.04); --shadow-sm: 0 2px 4px rgba(20, 18, 40, 0.06); --shadow-md: 0 4px 12px rgba(120, 104, 166, 0.12); --shadow-lg: 0 12px 28px rgba(20, 18, 40, 0.14); /* motion */ --motion-quick: 120ms cubic-bezier(0.4, 0, 0.2, 1); --motion-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1); --motion-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="dark"] { --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55); }