/* The brand faces. Declared here so neither site can load a different set: a font is as much a part of the identity as the green is. @import rather than a so that including tokens.css is the only thing a consumer has to remember. It costs one serialised request; both sites also carry preconnect hints, which is what recovers most of that. One family for all text: Public Sans. The wordmark is set in a neutral grotesque, and a serif display face beside it read as two identities rather than one -- headings pulled one way while the logo above them pulled another. Weight and size carry the hierarchy instead. IBM Plex Mono stays, but only for figures and labels. That is not a second voice: it is there so digits line up down a column, which a proportional face cannot do. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Public+Sans:wght@400;500;600;700;800&display=swap'); /* ========================================================================= SalemNexus brand tokens — the single source of truth. Plain CSS custom properties on purpose. The marketing site has no build step, so anything requiring compilation could not be shared with it; this file is consumed unchanged by both the static site and the Angular app. Two layers, and the distinction matters: 1. PRIMITIVES (--sn-green-*, --sn-slate-*) are fixed values. They never change between themes and components must not use them directly. 2. ROLES (--sn-bg, --sn-text, --sn-accent …) are what components use. These are redefined per theme, so styling through them is what makes a component work on both grounds. Contrast figures below are measured, not estimated. ========================================================================= */ :root { /* --- primitives: brand green ------------------------------------------ --sn-green-500 is sampled from the wordmark itself. It is the identity, but at 3.92:1 on white it only clears WCAG AA for large text and UI shapes — not body copy. The darker steps exist so a filled button can carry white text legibly; the lighter ones so the green survives the dark ground, where 500 drops to a murky 4.81:1. */ --sn-green-700: #2E7508; /* white on this: 5.73:1 */ --sn-green-600: #347F09; /* white on this: 5.02:1 — filled buttons, light */ --sn-green-500: #3A930A; /* THE LOGO GREEN — do not alter */ --sn-green-400: #5FBE24; /* on #0F1117: 7.98:1 — accents, dark */ --sn-green-300: #7ED653; /* --- primitives: neutrals --------------------------------------------- Biased very slightly green so they read as chosen rather than inherited mid-grey, but not far enough to tint obviously. */ --sn-slate-950: #0F1117; --sn-slate-900: #171A21; --sn-slate-800: #1F232B; --sn-slate-700: #2C313A; --sn-slate-500: #6B7280; --sn-slate-400: #8B9099; --sn-slate-200: #D9DED6; --sn-slate-100: #E9EDE6; --sn-slate-50: #F4F7F1; --sn-white: #FFFFFF; /* --- primitives: status ---------------------------------------------- Separate from the accent on purpose. Success must not be the brand green, or "this worked" and "this is a SalemNexus thing" become the same signal and neither reads. */ --sn-ok: #1E8E4A; --sn-warn: #B26A00; --sn-danger: #C0392B; /* --- roles: light (default) ------------------------------------------- */ --sn-bg: var(--sn-slate-50); --sn-surface: var(--sn-white); --sn-surface-raised:var(--sn-slate-100); --sn-text: var(--sn-slate-950); --sn-text-muted: var(--sn-slate-500); --sn-line: var(--sn-slate-200); --sn-line-soft: var(--sn-slate-100); --sn-accent: var(--sn-green-500); /* marks, rules, large text */ --sn-accent-fill: var(--sn-green-600); /* filled surfaces carrying text */ --sn-accent-hover: var(--sn-green-700); --sn-on-accent: var(--sn-white); --sn-ok-fg: var(--sn-ok); --sn-warn-fg: var(--sn-warn); --sn-danger-fg: var(--sn-danger); /* --- type ------------------------------------------------------------- Three roles. Display carries the personality, body does the reading, mono is for anything a reader compares down a column — order totals, dates, IDs — where tabular figures stop digits jittering. */ /* Display and body are deliberately the same family. The token is kept separate so a future display face can be introduced in one place. */ --sn-font-display: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sn-font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sn-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sn-text-xs: 0.75rem; --sn-text-sm: 0.875rem; --sn-text-base: 1rem; --sn-text-lg: 1.125rem; --sn-text-xl: 1.5rem; --sn-text-2xl: 2rem; --sn-text-3xl: 2.75rem; /* --- space / shape ---------------------------------------------------- */ --sn-space-1: 0.25rem; --sn-space-2: 0.5rem; --sn-space-3: 1rem; --sn-space-4: 1.5rem; --sn-space-5: 2rem; --sn-space-6: 3rem; --sn-radius-sm: 6px; --sn-radius-md: 12px; --sn-radius-lg: 18px; --sn-radius-pill: 999px; } /* --- roles: dark --------------------------------------------------------- Guarded so an explicit light choice beats a dark OS setting. Only roles are redefined — primitives never move. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sn-bg: var(--sn-slate-950); --sn-surface: var(--sn-slate-900); --sn-surface-raised:var(--sn-slate-800); --sn-text: var(--sn-slate-50); --sn-text-muted: var(--sn-slate-400); --sn-line: var(--sn-slate-700); --sn-line-soft: var(--sn-slate-800); --sn-accent: var(--sn-green-400); --sn-accent-fill: var(--sn-green-400); --sn-accent-hover: var(--sn-green-300); --sn-on-accent: var(--sn-slate-950); --sn-ok-fg: #4ADE80; --sn-warn-fg: #FBBF24; --sn-danger-fg: #F87171; } } /* Repeated for the explicit toggle so it wins in both directions. */ :root[data-theme="dark"] { --sn-bg: var(--sn-slate-950); --sn-surface: var(--sn-slate-900); --sn-surface-raised:var(--sn-slate-800); --sn-text: var(--sn-slate-50); --sn-text-muted: var(--sn-slate-400); --sn-line: var(--sn-slate-700); --sn-line-soft: var(--sn-slate-800); --sn-accent: var(--sn-green-400); --sn-accent-fill: var(--sn-green-400); --sn-accent-hover: var(--sn-green-300); --sn-on-accent: var(--sn-slate-950); --sn-ok-fg: #4ADE80; --sn-warn-fg: #FBBF24; --sn-danger-fg: #F87171; }