/* ============================================================
MailCull Design Tokens — Colors & Type
Source: Inspired by Intercom, implemented with Inter (Google)
Load order (in app):
design-system.css → marketing-ui.css → public-content-ui.css
→ workspace-ui.css
============================================================ */
/* ----- FONTS ------------------------------------------------
Primary: Inter (load via Google Fonts in )
Mono / eyebrows: Courier New (system stack, no webfont)
------------------------------------------------------------- */
/* ----- @FONT-FACE -------------------------------------------
Inter is bundled with the design system (fonts/). Variable font:
one file covers weights 100–900. Paths resolve relative to this
file (project root). The Google Fonts in the header note
is an optional CDN fallback; these local faces take precedence.
------------------------------------------------------------- */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("fonts/InterVariable.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("fonts/InterVariable-Italic.woff2") format("woff2");
}
:root {
color-scheme: light;
/* === CORE SURFACES === */
--bg: #faf9f6; /* Warm cream — page canvas */
--panel: #ffffff; /* @kind color */ /* Pure white — card surface */
--panel-strong: #fdfcfa; /* @kind color */ /* Slightly tinted elevated panel */
--surface: #f5f3ef; /* Hover / active nav background */
/* === TEXT === */
--ink: #111111; /* @kind color */ /* Off-black — primary text, primary btn */
--muted: #7b7b78; /* @kind color */ /* Warm grey — secondary text, labels */
/* === BRAND ACCENT === */
--accent: #ff5600; /* Fin Orange — brand, focus, eyebrow */
--accent-dark: #cc4400; /* Hover / link state */
/* === SEMANTIC STATUSES === */
--good: #067647; /* Deliverable */
--warn: #b54708; /* Risky */
--danger: #c41c1c; /* Undeliverable / failed */
--unknown: #7b7b78; /* Unknown / pending */
/* === BORDERS === */
--line: #dedbd6; /* @kind color */ /* Oat — all borders */
--line-strong: #c8c4bf; /* @kind color */ /* Warm sand — focus, hover borders */
/* === SEMANTIC COLOR ALIASES === */
--fg1: var(--ink);
--fg2: var(--muted);
--bg1: var(--bg);
--bg2: var(--panel);
--bg3: var(--surface);
/* === RADII ===
Sharp geometry is part of the brand.
Never exceed 8px. No pills. */
--radius-card: 8px;
--radius-btn: 4px;
--radius-nav: 6px;
/* === ELEVATION ===
Flat by default. Shadow only on toasts + modals. */
--shadow-modal: 0 4px 24px rgba(0, 0, 0, 0.10);
--shadow-toast: 0 4px 24px rgba(0, 0, 0, 0.08);
--shadow-none: none;
/* === SPACING SCALE ===
8 · 10 · 12 · 14 · 16 · 20 · 24 · 32 · 40 · 48 · 60 · 64 · 80 · 96 */
--space-1: 4px;
--space-2: 8px;
--space-3: 10px;
--space-4: 12px;
--space-5: 14px;
--space-6: 16px;
--space-7: 20px;
--space-8: 24px;
--space-9: 32px;
--space-10: 40px;
--space-11: 48px;
--space-12: 60px;
--space-13: 64px;
--space-14: 80px;
--space-15: 96px;
/* === MOTION === */
--dur-fast: 0.12s; /* @kind other */
--ease: ease; /* @kind other */
--hover-scale: 1.06; /* @kind other */
--press-scale: 0.92; /* @kind other */
/* === TYPE FAMILIES === */
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
/* === BASE TYPE VARS === */
--text-body-size: 15px;
--text-body-line: 1.55;
--text-body-weight: 400;
--tracking-display: -2.4px;
--tracking-h2: -1.6px;
--tracking-h3: -0.96px;
--tracking-section: -0.72px;
--tracking-feature: -0.48px;
--tracking-mono: 0.06em;
/* === MOTION TOKENS (see README "Animation & motion") === */
--motion-instant: 80ms; /* @kind other */
--motion-fast: 120ms; /* @kind other */
--motion-base: 220ms; /* @kind other */
--motion-slow: 420ms; /* @kind other */
--motion-reveal: 700ms; /* @kind other */
--ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
}
/* ============================================================
DARK MODE — opt in with or
apply `.dark-scope` to a subtree.
Designed to preserve the warm-editorial feel: ink is replaced
with warm cream, surfaces are dark-warm-near-black, not blue.
Accent shifts +6% lightness so it still reads on the dark bg.
============================================================ */
:root[data-theme="dark"],
.dark-scope {
color-scheme: dark;
/* Surfaces — warm near-black ladder */
--bg: #15130f;
--panel: #1c1a16;
--panel-strong: #221f1a;
--surface: #28241e;
/* Text — warm cream on dark */
--ink: #f4efe7;
--muted: #8a847b;
/* Brand — slightly lifted for dark bg contrast */
--accent: #ff6a1a;
--accent-dark: #ff8a4a;
/* Status — lifted ~+8% lightness for AA on dark */
--good: #2eb678;
--warn: #e08542;
--danger: #e94545;
--unknown: #8a847b;
/* Borders — warm dark grey */
--line: #2d2a24;
--line-strong: #3a3631;
/* Aliases */
--fg1: var(--ink);
--fg2: var(--muted);
--bg1: var(--bg);
--bg2: var(--panel);
--bg3: var(--surface);
/* Shadows — heavier so cards still detach from dark bg */
--shadow-modal: 0 6px 28px rgba(0, 0, 0, 0.55);
--shadow-toast: 0 4px 24px rgba(0, 0, 0, 0.50);
}
/* Dark mode is opt-in via [data-theme="dark"] / .dark-scope (declared
above). Set one of those on or a subtree to enable it.
NOTE: a prior `@media (prefers-color-scheme: dark) { :root:not([data-theme]) }`
block was removed here — it redeclared the same 16 tokens under an
unregistered scope AND was missing its closing brace, which trapped
every .mc-* type class below inside the media query so they never
applied in light mode. */
/* ----- SEMANTIC TYPE CLASSES --------------------------------
Match design-system.css. Headings are weight 400 with
aggressive negative tracking and 1.00 line-height.
------------------------------------------------------------- */
.mc-display {
font-family: var(--font-sans);
font-size: clamp(40px, 7vw, 80px);
font-weight: 400;
letter-spacing: var(--tracking-display);
line-height: 1.00;
color: var(--ink);
}
.mc-h1,
.mc-heading {
font-family: var(--font-sans);
font-size: clamp(28px, 5vw, 54px);
font-weight: 400;
letter-spacing: var(--tracking-h2);
line-height: 1.00;
color: var(--ink);
}
.mc-h2,
.mc-subheading,
.mc-card-title {
font-family: var(--font-sans);
font-size: clamp(20px, 3vw, 36px);
font-weight: 400;
letter-spacing: var(--tracking-h3);
line-height: 1.00;
color: var(--ink);
}
.mc-section-title {
font-family: var(--font-sans);
font-size: 26px;
font-weight: 500;
letter-spacing: var(--tracking-section);
line-height: 1.10;
color: var(--ink);
}
.mc-feature-title {
font-family: var(--font-sans);
font-size: clamp(18px, 2vw, 24px);
font-weight: 500;
letter-spacing: var(--tracking-feature);
line-height: 1.15;
color: var(--ink);
}
.mc-body {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 400;
line-height: 1.55;
color: var(--muted);
}
.mc-body-ink {
color: var(--ink);
}
.mc-eyebrow,
.mc-label,
.mc-chip-text {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: var(--tracking-mono);
text-transform: uppercase;
color: var(--muted);
}
.mc-serif { /* rarely used — reserved for editorial moments */
font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}