/* ═══════════════════════════════════════════════════════════════════════ Verdis design tokens — Rebrand Round: Verdis colour + type identity. Source of truth: docs/design-system.md §2 (do NOT re-derive from mockups). The v2 token NAMES are unchanged (every existing selector keeps working); only VALUES are remapped onto the Verdis brand palette. The legacy aliases at the foot still resolve *through* these tokens, so old selectors inherit the new palette automatically. ── Verdis palette (docs/design-system.md §2 · verdis-brand-board.html) ── Fairway #1E4D3B primary brand green — CTAs, links, active states → --fairway Verdis Green #2F9E67 signature accent — large fills, gradients, icons → --verdis Bright #43C182 highlight / on-dark accent (eyebrows, ticks) → --green3 / --bright Sage #A9C7B2 muted-on-dark text, positive borders, dividers → --sage Mist #E7F0E8 tinted surfaces / selected + positive tint → --mint Paper #F8F6EF brand paper; ships as sage mist #EFF3EE (10 Jul) → --fog Ink #15241D text + dark fills → --ink Gold #C6A15B RARE — founding-coach / premium only → --flag White #FFFFFF stays the clean card surface (--paper) on the warm Paper bg. ── WCAG AA (normal text) verified ── Ink / canvas 14.4:1 · Fairway text / canvas 8.6:1 · white / Fairway 9.6:1 · white / fairway-2 5.2:1 · slate / canvas 5.0:1. Verdis Green (#2F9E67) and Bright (#43C182) fall below AA as small text on light and as bg under white text, so they are used ONLY as large fills / gradients / on-dark accents — never as white-on-green CTAs (those stay --fairway). ── Responsive breakpoints — canonical, mobile-first (unchanged) ── 480 large phones · 768 tablet (inline nav) · 980 desktop. Base = 390px. ═══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Instrument+Sans:wght@400..700&family=DM+Mono:wght@400;500&display=swap'); :root{ /* ── Verdis brand palette (v2 token names, Verdis values) ── */ --ink:#15241D; /* primary text; dark fills (footer, scorecard header, active chips, toasts) */ --slate:#5b6b63; /* muted text, secondary labels (sage-grey; AA 5.2:1 on Paper) */ --fairway:#1E4D3B; /* THE brand green: CTAs, links, key numerals, active states. ~10% of surface */ --fairway-2:#2B7A54; /* hover / pressed state of fairway (white text stays AA, 5.2:1) */ --green3:#43C182; /* Bright — light-green accents ON DARK surfaces only (dark-band eyebrows, toast ticks) */ --paper:#ffffff; /* card surface — clean white on the warm Paper background */ --fog:#EFF3EE; /* Sage-mist canvas — cool light-green app/page background, subdued row fills. Replaces warm cream Paper #F8F6EF (2026-07-09/10): the cream canvas read "white on white" (1.08:1 vs cards) and, deepened, Jordan rejected cream as a page background outright. Sage mist separates cards at 1.12:1 and sits in the green family with --line, --mint and --sage. */ --line:#C5D3C9; /* Sage-tint hairline — the only border colour (deepened with --fog) */ --mint:#E7F0E8; /* Mist — faint selected/positive tint + tinted surfaces */ --flag:#C6A15B; /* Gold — RARE: founding-coach / premium only (formerly rating stars; ratings absent per §10) */ /* functional status colours (semantic, never decorative) */ --amber:#a9781a; --amber-bg:#faf1dd; /* pending / waiting / needs-action */ --red:#b23a2c; --red-bg:#fbeae7; /* decline / destructive */ --r:12px; /* default radius (cards, panels) */ --r-sm:9px; /* small radius (inputs, slots, day chips, scorecard) */ --shadow:0 1px 2px rgba(21,36,29,.06), 0 10px 26px rgba(21,36,29,.10); --bar-shadow:0 -1px 0 var(--line), 0 -8px 24px rgba(21,36,29,.05); --sans:'Instrument Sans',system-ui,sans-serif; --serif:'Fraunces',Georgia,serif; --mono:'DM Mono',ui-monospace,monospace; /* ── "Well kept" type discipline (2026-07-07) ── Weights (sans): 450 body · 500 meta/labels · 550 strong · 600 UI/buttons/names · 700 eyebrows ONLY. 800/900 are deleted sitewide — when everything is bold, nothing is. Serif (Fraunces): 480 italic accents · 560 wordmark/display · 600 headings. Sizes collapse onto the locked scale below; don't invent in-between values. */ --fs-eyebrow:.72rem; /* + weight 700, letter-spacing .08em, uppercase */ --fs-meta:.84rem; /* secondary rows, captions */ --fs-ui:.9rem; /* buttons, inputs, nav */ --fs-body:1rem; /* body copy, weight 450, line-height 1.65 */ --fs-lead:1.18rem; /* hero/section subs */ --fs-h3:1.45rem; /* serif card/section minors */ --fs-h2:1.9rem; /* serif section heads */ /* ── spacing rhythm — 8pt base; sections breathe at s6/s7 ── */ --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:144px; /* ── the horizon line — "Well kept" signature #2. One links-land contour + flag. Deployed ONLY on: hero grounds, dark-band lower edges, empty states. Not a texture — a knowing nod. Light = fairway on paper; dark = sage on ink. ── */ --horizon-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 58' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q180 22 360 32 T720 28 Q840 26 960 30' fill='none' stroke='%231E4D3B' stroke-width='1.3' opacity='.28' vector-effect='non-scaling-stroke'/%3E%3Cg opacity='.5'%3E%3Cline x1='820' y1='10' x2='820' y2='29' stroke='%231E4D3B' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M820 10 L838 15 L820 20 Z' fill='%231E4D3B'/%3E%3C/g%3E%3C/svg%3E"); --horizon-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 58' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q180 22 360 32 T720 28 Q840 26 960 30' fill='none' stroke='%23A9C7B2' stroke-width='1.3' opacity='.35' vector-effect='non-scaling-stroke'/%3E%3Cg opacity='.8'%3E%3Cline x1='820' y1='10' x2='820' y2='29' stroke='%23A9C7B2' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M820 10 L838 15 L820 20 Z' fill='%2343C182'/%3E%3C/g%3E%3C/svg%3E"); /* ── Verdis palette, semantic names (additive; safe for new code) ── */ --verdis:#2F9E67; /* signature accent green — large fills, gradients, icon/avatar washes */ --bright:#43C182; /* highlight / on-dark accent (alias of --green3) */ --sage:#A9C7B2; /* full sage — muted-on-dark text, positive-chip borders, dividers */ /* ── legacy aliases — keep old selectors working; do not use in new code ── */ --green:var(--fairway); --green2:var(--fairway-2); --gold:var(--flag); --dark:var(--ink); --muted:var(--slate); --cream:var(--fog); --white:var(--paper); --border:var(--line); --radius:var(--r); }