/* main.css — Salix design tokens + base reset * Owns: design tokens, box-model reset, body defaults, typography scale * * Visual system: docs/salix-design-template.md (source of truth). * Token NAMES are inherited from the previous Crestmark system on purpose — * every stylesheet already consumes them, so re-valuing here rolls Salix across * the whole app without sweeping edits. * * Typeface note: Salix specifies Geist (display) + Inter (UI). We deliberately * keep **General Sans** — the Salix signature we're adopting is the type SCALE * and its heavy negative tracking, not the typeface. */ :root { /* Text */ --color-ink-primary: #181818; /* headings / high-emphasis (Salix text-strong) */ --color-ink-body: #46484d; /* body copy — 9.15:1 on white, never pure black */ --color-ink-muted: #6c6f76; /* hints, secondary labels */ --color-ink-white: #FFFFFF; /* Surfaces */ --color-bg-page: #FFFFFF; --color-surface-card: #FFFFFF; --color-surface-warm: #FAFAFA; /* Salix surface-subtle */ --color-surface-warm-2: #F6F7F9; /* Salix surface-tint */ --color-surface-hover: rgba(108, 111, 118, 0.06); --color-bg-dark: #181818; /* dark feature sections, sidebar */ --color-bg-darkest: #030303; --color-bg-dark-40: rgba(24, 24, 24, 0.40); --color-border: #ECECEC; /* Actions / accents */ --color-accent-dark: #100202; /* near-black primary button body */ --color-accent-pink: #F83D69; --color-accent-cyan: #21CCEE; --color-accent-red: #C2001D; --color-success: #1B873F; --color-danger: #C2001D; /* Brand primary — white-label: overridden per customer at runtime. Defaults to the Salix blue. */ --brand-primary: #466CF3; /* Fixed product signature — intentionally NOT derived from --brand-primary. */ --gradient-brand: linear-gradient( 90deg, #21CCEE 0%, #1470EF 33.2%, #6927DA 68.5%, #F23D94 100% ); /* Typography — Salix scale on General Sans. Both roles resolve to the same family today; the split exists so a display face can be swapped in later. */ --font-primary: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-primary); --font-ui: var(--font-primary); --fs-hero: 50px; /* display / H1 */ --fs-h2: 34px; --fs-h3: 32px; --fs-title: 24px; /* card title / H4 */ --fs-stat: 50px; --fs-lead: 18px; --fs-body: 16px; --fs-sm: 14px; /* UI label / nav */ --fs-caption: 12px; /* eyebrow / badge */ /* Negative tracking is the core Salix signature. */ --tracking-display: -2.5px; --tracking-h2: -2px; --tracking-h3: -1px; --tracking-h4: -1px; /* Spacing (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 40px; --space-10: 60px; /* Radii */ --radius-pill: 100px; --radius-card: 16px; /* Salix radius-lg */ --radius-input: 12px; /* Salix radius-md */ --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-round: 50%; /* Elevation — Salix uses restrained lift (the old system was flat). */ --shadow-pill: 0 4px 16px rgba(0, 0, 0, 0.06); --shadow-soft: 0 0.6px 0.4px -1px rgba(0, 0, 0, 0.12), 0 2.2px 1.6px -2px rgba(0, 0, 0, 0.11); /* Layout */ --sidebar-w: 248px; --container-max: 1200px; --container-alt: 1140px; color-scheme: light; } /* ── Dark mode ───────────────────────────────────────────────── * Opt-in: applied only when the flag is set by the * theme toggle (light stays the default). Mostly a token swap; a few component * surfaces hardcode #fff and are overridden below. The email PREVIEW stage is * deliberately kept light — emails are authored on a light canvas. */ :root[data-theme="dark"] { --color-ink-primary: #F5F5F6; --color-ink-body: #B9BBC2; /* mirrors the light theme's softer body grey */ --color-ink-muted: #8A8D95; --color-ink-white: #FFFFFF; --color-bg-page: #0B0B0D; --color-surface-card: #141417; --color-surface-warm: #141417; --color-surface-warm-2: #17171B; --color-surface-hover: rgba(255, 255, 255, 0.06); --color-bg-dark: #000000; --color-bg-darkest: #000000; --color-bg-dark-40: rgba(0, 0, 0, 0.45); --color-border: #26262B; --color-accent-dark: #F5F5F6; /* the "dark pill" inverts to a light pill */ /* Lift reads as a darker halo rather than a light shadow. */ --shadow-pill: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-soft: 0 0.6px 0.4px -1px rgba(0, 0, 0, 0.5), 0 2.2px 1.6px -2px rgba(0, 0, 0, 0.45); color-scheme: dark; } /* Dark-pill button flips to dark text on its now-light background. */ :root[data-theme="dark"] .btn--dark { color: #14141A; } /* Form controls, menus, chips and modals that hardcode a white surface. */ :root[data-theme="dark"] .input, :root[data-theme="dark"] .textarea, :root[data-theme="dark"] .select { background: #101014; } :root[data-theme="dark"] .modal, :root[data-theme="dark"] .add-menu, :root[data-theme="dark"] .var-chip { background: var(--color-surface-card); } :root[data-theme="dark"] .iconbtn:hover, :root[data-theme="dark"] .add-menu__item:hover .add-menu__icon { background: var(--color-surface-warm-2); } /* Elements that sit on the now-light ink-primary colour need dark text. */ :root[data-theme="dark"] .var-chip:hover, :root[data-theme="dark"] .accordion__toggle, :root[data-theme="dark"] .switch input:checked + .switch__track::after { color: #14141A; } /* Keep the email preview toolbar/stage readable against a dark app. */ :root[data-theme="dark"] .preview__modes { background: #26262B; } :root[data-theme="dark"] .preview__mode.is-active { background: #F3F1EE; color: #14141A; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.7; /* Salix body rhythm (16px/27.2px) */ color: var(--color-ink-body); background-color: var(--color-surface-warm); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Salix headings: display face, weight 500, tight leading, heavy negative tracking. The tracking is the signature — keep it even as sizes change. */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--color-ink-primary); } h1 { font-size: var(--fs-hero); line-height: 1.1; letter-spacing: var(--tracking-display); } h2 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: var(--tracking-h2); } h3 { font-size: var(--fs-h3); line-height: 1.4; letter-spacing: var(--tracking-h3); } h4 { font-size: var(--fs-title); line-height: 1.4; letter-spacing: var(--tracking-h4); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } ::placeholder { color: var(--color-ink-muted); opacity: 1; } /* Utility */ .muted { color: var(--color-ink-muted); } /* Salix eyebrow pill — a floating section label (icon + short caption). */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); height: 42px; padding: 9px 16px; border-radius: var(--radius-pill); background: var(--color-surface-card); box-shadow: var(--shadow-pill); color: var(--color-ink-primary); font-size: var(--fs-caption); font-weight: 500; line-height: 1; } .eyebrow i { font-size: 16px; color: var(--brand-primary); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }