/* =========================================================================== tokens.css -- the single source of truth for brand color across BOTH surfaces of dmdent.com. Why this file exists ------------------- Until now the brand teal was defined twice, differently: static/css/style.css (signed-in app) --primary: #1E9A83 static/css/public.css (6 marketing pages) --primary: #0d6e6e Those are not a tint and a shade of one color -- they are two different color decisions, so a visitor who signed up landed in a dashboard wearing a visibly different teal than the homepage that sold it to them. Same story for the teal tint, which existed as --primary-tint (#E7F5F0) in the app and --primary-light (#e6f4f4) on the marketing side: two near-identical values maintained in two places. #1E9A83 is now the canonical brand hue (H 169deg, S 67%, L 36%). Every step below is that same hue and saturation at a different lightness, so the whole ramp reads as one color family rather than a set of unrelated picks. The contrast problem this ramp solves ------------------------------------- #1E9A83 sits at L36, which is too light to carry white text: white on it measures 3.50:1, under WCAG AA's 4.5:1 for normal-size text. It also fails as text itself on a white page, for the same reason -- 3.50:1 either way. That is not a flaw in the color, it is simply what that lightness can do. Previously .btn-primary used it as a button background with white text, which is the single most-clicked element in the product. So the ramp assigns each job to the step that can actually do it. Ratios below are computed with the WCAG relative-luminance formula, against #FFFFFF (--surface), #F7FAFA (page background) and #E7F5F0 (--primary-tint) as noted. Do not swap these roles around without recomputing. ======================================================================== */ :root { /* --- Brand teal ramp: one hue, six lightnesses ------------------------- Each token below names a JOB, not a shade. Reach for the one whose job matches what you are styling and the contrast is correct by construction -- that is the entire point of splitting them out. */ /* L94 -- tint. Backgrounds for badges, callouts, table headers, hover rows. Never put --primary on this; use --primary-text (4.78:1). */ --primary-tint: #E7F5F0; /* L36 -- THE BRAND HUE. Decorative use only: borders, rules, focus outlines, icon/chart shapes, large filled areas with no text on them. NOT for text. NOT as a background under white text. Both are 3.50:1 and fail AA. Use --primary-strong or --primary-text for those. */ --primary: #1E9A83; /* L30 -- solid surfaces that carry WHITE text: primary buttons, CTAs, filled badges. White on this is 4.83:1 -- clears AA for normal text. */ --primary-strong: #19806D; /* L28 -- teal TEXT: links, small labels, inline emphasis. 5.36:1 on white, 5.11:1 on the page background, 4.78:1 on --primary-tint, so it is safe on all three. (The previous value here, #147D6A, measured 4.49:1 on the tint -- marginally under AA. This step fixes that while staying visually near-identical.) */ --primary-text: #177866; /* L22 -- headings and hover states. 7.66:1 on white, 7.30:1 on the page background: clears AA comfortably and AAA (7:1) as well. This is the marketing pages' heading color, replacing the off-family #0a5555. */ --primary-deep: #125E50; /* Near-black green ink. Darkest heading/body ink and the resting hover target for filled teal buttons. 14.60:1 on white. */ --primary-dark: #0B2E2A; /* --- Neutrals ---------------------------------------------------------- */ --bg: #F6FAF8; --surface: #FFFFFF; --surface-alt: #FBFDFC; --ink: #10201D; /* 16.00:1 on --bg */ --muted: #5F7369; /* 5.07:1 on white -- AA for normal text */ --border: #E1EAE6; /* --- Accent (amber) ---------------------------------------------------- Same split as the teal above, and for the same reason: --accent at its own lightness is a background/icon color only. As small text on --accent-tint it measures 2.70:1, well under AA -- use --accent-text (5.01:1 on the tint) whenever the amber is carrying words. */ --accent: #C08A3E; --accent-tint: #FBF1E0; --accent-text: #8A5F26; /* --- Danger (red) ----------------------------------------------------- Same pattern once more. Plain --danger is fine as a background or icon color, and fine as text on plain white, but only clears ~4.2:1 as text on --danger-tint -- just under AA. --danger-text (5.03:1 there) is the one to use for words on the tint. */ --danger: #C4453A; --danger-tint: #FBEAE8; --danger-text: #B03E34; /* --- Shape & elevation ------------------------------------------------- */ --radius: 14px; --radius-sm: 9px; --shadow-sm: 0 1px 2px rgba(11, 46, 42, 0.05); --shadow: 0 1px 2px rgba(11, 46, 42, 0.04), 0 10px 28px -14px rgba(11, 46, 42, 0.16); --shadow-lg: 0 24px 48px -16px rgba(11, 46, 42, 0.28); --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif; /* --- The public site's own type and ground (10 Sep 2026) --------------- Direction "A / The Ledger", chosen after a dentist called the old homepage "too AI generic" -- see docs/PUBLIC_SITE_DESIGN.md for the diagnosis and the rules this is meant to hold. The marketing pages now read as an instrument rather than a pitch: a newsroom grotesque for anything the interface says, a serif for anything the page says, and a monospace for figures so a column of pesos lines up. The app keeps --font-heading (Plus Jakarta Sans); these three are the public half, and the two families are loaded in public_base.html. --font-figure is a SYSTEM stack on purpose. The signed-in app loads IBM Plex Mono, but the marketing pages exist to load fast and a third webfont for a dozen numbers is not worth a round trip. SF Mono on a Mac, Consolas on Windows; both are fine at 11-13px in a table. */ --font-public-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-public-prose: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-figure: ui-monospace, 'SF Mono', SFMono-Regular, 'IBM Plex Mono', Menlo, Consolas, monospace; /* Warm paper, and a warm hairline to draw on it. --bg (#F6FAF8) is a cool green-white and stays the app's ground. The public pages move to paper: it is the one change that stops the site reading as another teal-on-near-white SaaS template, and it is warm enough that a hairline rule reads as a rule rather than as a shadow. Verified against every ink it carries (tests/test_smoke.py): --ink 16.14:1, --muted 4.86:1, --primary-text 5.14:1, --primary-deep 7.34:1, --danger-text 5.61:1, and --primary 3.35:1 as a border. --rule-warm is decorative only -- a separator, never a control's edge -- so it carries no contrast requirement of its own. */ --paper: #FBFAF7; --rule-warm: #DEDCD3; /* --- Spacing scale ---------------------------------------------------- Added alongside this file. style.css currently carries 52 distinct rem values, only 11 of which land on a 4px grid -- including the cluster 0.82/0.83/0.85/0.86/0.87/0.88rem, six values inside a single pixel of each other. That is drift, not six deliberate decisions, and it is the same failure mode already documented for font-size in public.css. These are the intended steps. Deliberately NOT retrofitted onto existing rules here: that is a sweep worth doing with time to eyeball each component, not in the same change that moves the brand color. Use them for anything new, and migrate declarations to the nearest step as components are touched. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* --- Legacy aliases --------------------------------------------------- public.css and the six marketing templates were written against these names. Kept as aliases so this change does not require editing every rule on every page at once; prefer the canonical names above in new work, and retire an alias once nothing references it. --primary-light was the marketing side's own copy of --primary-tint at a slightly different value (#e6f4f4). It now resolves to the one real tint, which is the point. */ --primary-light: var(--primary-tint); --text: var(--ink); --text-muted: var(--muted); --card: var(--surface); /* --- Public-page type scale ------------------------------------------- Moved here from public.css unchanged -- see the note there. The six marketing pages carried 32 distinct font-size values between them, 17 below 1rem, including 0.85/0.86/0.87/0.88rem (13.60/13.76/13.92/14.08px -- visually identical). This is the intended ladder; migrate existing declarations to the nearest step as pages are touched. */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.85rem; /* 13.6px */ --text-base: 0.95rem; /* 15.2px */ --text-lg: 1.1rem; /* 17.6px */ --text-xl: 1.4rem; /* 22.4px */ --text-2xl: 1.7rem; /* 27.2px */ --text-3xl: 2rem; /* 32px */ /* Display size for the marketing hero only. The shared h1 elsewhere tops out around --text-2xl, which is correct for an in-app page title but far too small for a homepage hero -- those are different rungs of the hierarchy and should not share a ceiling. */ --text-hero: clamp(2rem, 5vw, 3rem); }