/* ============================================================ MENTALICS — Design System · TOKENS Single source of truth. Extracted from the standalone design-system export. Load BEFORE wt-components.css. Set to switch themes. ============================================================ */ :root { /* ─── Signature gradient (top CTA, AI accents) ─── */ --grad: linear-gradient(118deg, #3b5bdb 0%, #5b54e6 48%, #22b3c9 100%); --soft: var(--surface-2); /* ─── Surface ─── */ --bg: #f7f8fa; /* app background */ --surface: #ffffff; /* cards */ --surface-2: #f1f3f7; /* hover / sunken */ --surface-3: #e9edf3; /* deeper fill */ /* ─── Navy (headers, dark chrome) ─── */ --navy: #0b1220; /* darkest — top bars, footer */ --navy-2: #131c33; /* raised navy panels */ --navy-3: #1d2942; /* navy hover / borders */ --on-navy: #eef2f9; /* text on navy */ --on-navy-muted: #94a0b8; /* secondary text on navy */ --on-navy-subtle: #5d6b86; /* ─── Border ─── */ --border: #e5e7eb; --border-2: #d4d9e0; /* stronger */ --divider: #eef0f3; /* ─── Text ─── */ --ink: #0b1220; /* headings */ --text: #2b3140; /* body */ --text-muted: #5f6878; /* secondary */ --text-subtle: #8b94a3; /* placeholder / meta */ /* ─── Accent (blue) ─── */ --accent: #3b5bdb; --accent-hover: #2f4ec4; --accent-press: #2843a8; --accent-tint: #e8edfc; /* chip / fill */ --accent-tint-2: #d6e0fa; --accent-ink: #1f3597; /* AA text on accent-tint */ /* ─── Status ─── */ --pos: #16a34a; /* green · positive / verified */ --pos-bg: #dcfce7; --pos-ink: #08612a; --neg: #dc2626; /* red · negative / crisis */ --neg-bg: #fee2e2; --neg-ink: #8a1414; --warn: #d97706; /* amber · pending */ --warn-bg: #fef3c7; --warn-ink: #7c4406; --neu: #64748b; /* gray · neutral */ --neu-bg: #eef1f5; --neu-ink: #3f4757; /* ─── Platform pills ─── */ --p-twitter: #1d9bf0; --p-twitter-bg: #e3f2fd; --p-twitter-ink: #0a5fa8; --p-instagram: #d6296b; --p-instagram-bg: #fde7f0; --p-instagram-ink: #8a134a; --p-tiktok: #111827; --p-tiktok-bg: #e9edf3; --p-tiktok-ink: #111827; --p-youtube: #e3342f; --p-youtube-bg: #fde8e7; --p-youtube-ink: #8a1614; --p-linkedin: #0a66c2; --p-linkedin-bg: #e2eefb; --p-linkedin-ink: #074a8c; --p-facebook: #1877f2; --p-facebook-bg: #e7f0fe; --p-facebook-ink: #0b4aa2; /* ─── Sentiment (signed) ─── */ --sent-pos: var(--pos); --sent-pos-bg: var(--pos-bg); --sent-pos-ink: var(--pos-ink); --sent-neg: var(--neg); --sent-neg-bg: var(--neg-bg); --sent-neg-ink: var(--neg-ink); --sent-neu: var(--neu); --sent-neu-bg: var(--neu-bg); --sent-neu-ink: var(--neu-ink); --sent-off: #8b94a3; --sent-off-bg: #eef1f5; --sent-off-ink: #5f6878; /* ─── Chart categorical ─── */ --c-1: #3b5bdb; /* accent blue */ --c-2: #16a34a; /* green */ --c-3: #d97706; /* amber */ --c-4: #dc2626; /* red */ --c-5: #8b5cf6; /* violet */ --c-6: #0891b2; /* cyan */ /* ─── Elevation ─── */ --shadow-card: 0 1px 2px rgba(11,18,32,.05), 0 1px 1px rgba(11,18,32,.04); --shadow-raised: 0 2px 4px rgba(11,18,32,.05), 0 8px 20px rgba(11,18,32,.07); --shadow-pop: 0 16px 40px rgba(11,18,32,.16), 0 4px 10px rgba(11,18,32,.08); --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); /* ─── Radius ─── */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; --r-pill: 999px; /* ─── Spacing (4px base) ─── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* ─── Typography ─── */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --fz-xs: 12px; --fz-sm: 13px; --fz-body: 14px; --fz-lg: 16px; --fz-h6: 18px; --fz-h5: 22px; --fz-h4: 28px; --fz-h3: 36px; --fz-h2: 48px; --fz-h1: 60px; --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.5; --ls-tight: -0.02em; /* ─── Motion & timing ─── */ --ease-out: cubic-bezier(.2,.7,.3,1); --ease-in-out: cubic-bezier(.4,0,.2,1); --dur-1: .12s; --dur-2: .18s; --dur-3: .26s; --dur-4: .5s; --dur-reveal: .6s; --reveal-rise: 20px; --aurora-drift: 22s; /* ─── Z-index scale ─── */ --z-base: 1; --z-sticky: 50; --z-topbar: 60; --z-dropdown: 70; --z-scrim: 90; --z-sheet: 91; --z-modal: 100; --z-toast: 120; --z-tooltip: 130; /* ─── Chart ─── */ --chart-grid: var(--divider); --chart-axis: var(--border-2); --chart-label: var(--text-muted); --chart-area-opacity: .16; } /* ============================================================ DARK THEME · set The brand is light-first; dark is a complete, supported surface skin. Accent + status semantics are preserved; only neutrals, tints and elevation are re-mapped. ============================================================ */ :root[data-theme="dark"] { --bg: #0a1020; --surface: #101a30; --surface-2: #16223c; --surface-3: #1f2d4a; --navy: #070c17; --navy-2: #101a30; --navy-3: #1f2d4a; --on-navy: #eef2f9; --on-navy-muted: #94a0b8; --on-navy-subtle: #5d6b86; --border: #243049; --border-2: #33425f; --divider: #1a2540; --ink: #eef2f9; --text: #c7d0e3; --text-muted: #94a0b8; --text-subtle: #6b78a0; --accent: #5b78f0; --accent-hover: #6f88f4; --accent-press: #849af7; --accent-tint: #1a2747; --accent-tint-2: #22325a; --accent-ink: #aebfff; --pos: #22c55e; --pos-bg: color-mix(in oklab, #22c55e 18%, var(--surface)); --pos-ink: #7ee2a8; --neg: #f04438; --neg-bg: color-mix(in oklab, #f04438 18%, var(--surface)); --neg-ink: #ff9d96; --warn: #f59e0b; --warn-bg: color-mix(in oklab, #f59e0b 18%, var(--surface)); --warn-ink: #f7c873; --neu: #8b97ab; --neu-bg: color-mix(in oklab, #8b97ab 16%, var(--surface)); --neu-ink: #bcc6d6; --p-twitter-bg: color-mix(in oklab, var(--p-twitter) 24%, var(--surface)); --p-twitter-ink: #8fd0ff; --p-instagram-bg: color-mix(in oklab, var(--p-instagram) 24%, var(--surface)); --p-instagram-ink: #ff9ac4; --p-tiktok-bg: color-mix(in oklab, #cbd5e1 14%, var(--surface)); --p-tiktok-ink: #dbe3ef; --p-youtube-bg: color-mix(in oklab, var(--p-youtube) 24%, var(--surface)); --p-youtube-ink: #ff9d99; --p-linkedin-bg: color-mix(in oklab, var(--p-linkedin) 24%, var(--surface)); --p-linkedin-ink: #7db8f0; --p-facebook-bg: color-mix(in oklab, var(--p-facebook) 24%, var(--surface)); --p-facebook-ink: #8fbdf5; --sent-off: #6b78a0; --sent-off-bg: color-mix(in oklab, #6b78a0 16%, var(--surface)); --sent-off-ink:#aab4c8; --c-1: #6f88f4; --c-2: #22c55e; --c-3: #f59e0b; --c-4: #f04438; --c-5: #a78bfa; --c-6: #22d3ee; --shadow-card: 0 1px 2px rgba(0,0,0,.45); --shadow-raised: 0 2px 4px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.5); --shadow-pop: 0 18px 44px rgba(0,0,0,.62), 0 4px 12px rgba(0,0,0,.5); --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent); color-scheme: dark; } :root { color-scheme: light; } html { transition: background-color var(--dur-3) var(--ease-out); } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fz-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--accent-tint-2); color: var(--accent-ink); }