/* ========================================================================== THINK NORTH — FAMILY DESIGN TOKENS ========================================================================== Shared token layer for the whole product family (TNC parent site, CodeNSM, Br&W&, ReSach, Calmistry). This file is ADDITIVE: it does not replace any product's own stylesheet, and nothing here is required for existing pages to keep working. Load it AFTER a product's own CSS if you want its tokens available as fallbacks, or BEFORE it if a page is going to consume --brand-* directly (see "USAGE" below). Source of truth for the numbers in this file (read, not invented): - templates/site/base.html (TNC shell, font links, eyebrow markup) - static/site/tnc.css (TNC palette + type ramp, :root L5-25) - static/codensm/codensm.css (CodeNSM dark palette, :root L5-32) - templates/brandwand/base.html (Br&W& paper/plum palette, inline :root L16-19) - static/journey/css/journey.css (Calmistry/journey azure reskin, :root L6-24) - static/quiz/css/app.css (Calmistry canonical pastel palette, :root L7-24) - resach.md / resach_access.md (ReSach brand brief — parchment/oxblood/annotation blue; product has no shipped templates yet, so its block below is a forward allocation, not a read-back of existing CSS) USAGE ----- 1. Put `data-brand="codensm"` (or tnc | brandwand | resach | calmistry) on or a top-level wrapper in a template. 2. Consume `var(--brand-bg)`, `var(--brand-ink)`, `var(--brand-accent)`, `var(--brand-accent-2)`, `var(--brand-soft)` in NEW shared components (e.g. the blog-upgrade components in blog_upgrade.md) instead of hardcoding a product's local --accent/--mint/--plum var names. 3. Everything else in this file (spacing, radii, hairlines, type ramp, motion) is brand-agnostic and safe to use anywhere immediately. ========================================================================== */ :root{ /* --------------------------------------------------------------------- SPACING SCALE — 4px base grid, matches the padding values already in use across tnc.css (.wrap padding 28px≈--space-7, .sec padding via clamp already; .cap/.prod use 34-38px≈--space-9). Fluid steps are clamped so the scale still reads as "the same system" at small sizes. --------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 34px; --space-9: 44px; --space-10: 56px; --space-11: 72px; --space-12: 96px; /* section rhythm — fluid, mirrors tnc.css's own --sec-pad pattern (static/site/tnc.css L561: --sec-pad:clamp(110px,11vw,152px)) so a shared component can breathe the same amount on any product page */ --space-section: clamp(88px, 9vw, 140px); /* --------------------------------------------------------------------- RADII — tnc.css uses 8/10/12/16/18/20/22px scattered by component; this collapses that into a named scale so new components pick one size intentionally instead of a one-off value. --------------------------------------------------------------------- */ --radius-sm: 8px; /* buttons, inputs — tnc.css .btn L65, .field input L285 */ --radius-md: 14px; /* chips, small cards — codensm .cnb-card content.css L18 */ --radius-lg: 20px; /* panels, feature cards — tnc.css .prod L339, .dpanel L184 */ --radius-xl: 22px; /* hero/callout bands — tnc.css .calc L252, .dpath L414 */ --radius-pill: 999px; /* --------------------------------------------------------------------- HAIRLINES — every product renders structural dividers as 1px hairlines at low alpha over its own ink color (tnc.css --line/--line-2 L18-19, codensm --line/--line-2 L14-15, journey.css --line/--line-2 L13). Kept as *widths* here; color is intentionally brand-local (mixed from --brand-ink below) because a hairline must sit at the right contrast against each brand's own background. --------------------------------------------------------------------- */ --hairline: 1px; --hairline-thick: 2px; /* used for accent-colored rules, e.g. journey.css .jsec-head border-bottom L278, tnc.css .cap::before L216 */ /* --------------------------------------------------------------------- TYPE RAMP — three roles every product already keeps separate: display : Schibsted Grotesk (TNC/Br&W&) or Fraunces (Calmistry editorial) body : Hanken Grotesk (TNC) / IBM Plex Sans (Calmistry) / Inter (CodeNSM) mono : JetBrains Mono (TNC/CodeNSM/Br&W&) — the one face every product already agrees on, used for eyebrows/kickers/meta ("[ PRODUCTS ]" tnc.css .eyebrow L59, "codensm / blog" .cnc-eyebrow content.css L6, "0{{ p.n }}" journey .idx-style marks throughout journey.css) Font FAMILY choice stays per-brand (see blocks below / blog_upgrade.md); what's shared here is the fluid SIZE scale so headings/body/mono line up across products at the same viewport. --------------------------------------------------------------------- */ --font-mono-shared: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* note: Calmistry's journey/blog surfaces use "IBM Plex Mono" locally (journey.css L22) — an intentional per-product exception, not an oversight; new shared components should still default to the mono above unless they live entirely inside a Calmistry template. */ --step-caption: clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem); /* meta lines, mono labels */ --step-body: clamp(0.98rem, 0.95rem + 0.2vw, 1.08rem); /* running copy */ --step-lead: clamp(1.05rem, 1rem + 0.5vw, 1.22rem); /* deks/leads */ --step-h3: clamp(1.2rem, 1.05rem + 1vw, 1.5rem); --step-h2: clamp(1.5rem, 1.2rem + 1.8vw, 2.1rem); --step-h1: clamp(2rem, 1.5rem + 3vw, 3.2rem); --step-display: clamp(2.3rem, 1.6rem + 4.2vw, 4.5rem); /* tnc.css .h-xl L50 range */ /* editorial reading measure — see blog_upgrade.md §0 for the audit of where each blog surface currently sets its own (72ch codensm content.css L26, ~62-68ch effective journey.css .pillar-body L374 inside a 720px column). New long-form components should read this. */ --measure-read: 68ch; --measure-wide: 78ch; /* index/hero decks, not running body copy */ /* --------------------------------------------------------------------- MOTION — every product's reveal/hover timings cluster around the same two bands already (tnc.css .reveal transition .7s L389, .btn transition .22s L67; codensm .cnb-card transition .18s content.css L20; journey .jcard transition inherited from motion.css). Named here so new work doesn't invent a third timing. --------------------------------------------------------------------- */ --dur-micro: 120ms; /* hover color/border changes */ --dur-fast: 220ms; /* button/link states — tnc.css .btn L67 */ --dur-base: 350ms; /* card lift/hover shadow — codensm .cnb-card L20 */ --dur-slow: 700ms; /* scroll-reveal — tnc.css .reveal L389 */ --ease-out: cubic-bezier(.2,.7,.2,1); /* tnc.css .reveal L389, journey next-up */ --ease-standard: ease; } @media (prefers-reduced-motion: reduce){ :root{ --dur-micro: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } } /* ========================================================================== BRAND BLOCKS Each block sets exactly five tokens: --brand-bg, --brand-ink, --brand-accent, --brand-accent-2, --brand-soft. Values are read from each product's own :root (see file:line receipts in each comment), not invented — this is a re-expression of the existing palette under one shared naming scheme, so a cross-brand component can theme itself with `[data-brand="x"] .thing{ color:var(--brand-accent) }` instead of duplicating five hex values per product. ========================================================================== */ /* ---- TNC (parent) — deep navy + legible bright blue ----------------- static/site/tnc.css :root L6 (--bg), L10 (--ink), L13 (--accent), L14 (--accent-2), L11 (--soft) */ [data-brand="tnc"]{ --brand-bg: #070A12; --brand-ink: #F1F4FA; --brand-accent: #3FA9FF; --brand-accent-2:#6E8BFF; --brand-soft: #B6C0D2; } /* ---- CodeNSM — dark instrument panel + mint/sky neon ----------------- static/codensm/codensm.css :root L6 (--bg), L11 (--ink), L18 (--mint, aliased --accent L23), L20 (--sky, aliased --accent-2 L24), L15 (--soft) */ [data-brand="codensm"]{ --brand-bg: #0a0c11; --brand-ink: #e7ebf3; --brand-accent: #7ef0c9; --brand-accent-2:#7dd7ff; --brand-soft: #aab3c4; } /* ---- Br&W& — warm paper + plum, gold as a secondary flourish ---------- templates/brandwand/base.html inline :root L17-19 (--paper, --ink, --plum, --gold, --muted) */ [data-brand="brandwand"]{ --brand-bg: #FAF7F2; --brand-ink: #211C24; --brand-accent: #5B2A6E; --brand-accent-2:#B8860B; --brand-soft: #6E6572; } /* ---- ReSach — parchment reading room + oxblood, annotation blue -------- templates/resach/base.html inline :root (--paper, --ink, --ox, --anno, --dim) — read back from the shipped 2026-07-05 templates. */ [data-brand="resach"]{ --brand-bg: #F7F3EB; --brand-ink: #20242C; --brand-accent: #7A2E2E; --brand-accent-2:#31618C; /* "annotation blue" — margin notes, citations, links */ --brand-soft: #6C6A61; } /* ---- Calmistry — pastel instrument, rose/coral/lilac ------------------ static/quiz/css/app.css :root L8 (--bg), L14 (--ink), L18 (--rose, canonical Calmistry accent), L20 (--lilac, secondary), L15 (--ink-2 as --soft equivalent). NB: the journey/blog reskin of this same product (static/journey/css/journey.css L14) re-themes rose→azure for that module only; --brand-* here stays the canonical pastel identity. */ [data-brand="calmistry"]{ --brand-bg: #fdf2f6; --brand-ink: #3a2231; --brand-accent: #ff7eb6; --brand-accent-2:#c79bf0; --brand-soft: #6d4c5d; } /* ---- Ad-Apt — dark studio + signal green, amber as the test flag ------- templates/adapt/base.html inline :root (--ink, --txt, --go, --amber, --mut) — read back from the shipped base. */ [data-brand="adapt"]{ --brand-bg: #14161A; --brand-ink: #E8EAED; --brand-accent: #34D399; --brand-accent-2:#F59E0B; --brand-soft: #9AA0AA; }