/* ============================================================================ RECENZO — DESIGN TOKENS (authoritative single source of truth) ---------------------------------------------------------------------------- "Clinical Calm": green + cool neutrals. Trustworthy, careful, warm. Direction LOCKED by 00-brand-brief.md. Spec mirror: 03-visual-identity.md. RULES - Locked hex values (brand, brand-deep, brand-soft, ink, muted, bg, surface, mist, line, star) come from the brief and MUST NOT change. - Added shades (brand-400/600/700, dark-* set, semantic danger/warning) are derived extensions, each WCAG-verified (ratios noted inline). - Do NOT introduce blue. Gold/terracotta are retired. Amber is functional only (review stars / warning fills), never a brand accent. Contrast figures below are computed (WCAG 2.1, sRGB). AA = >=4.5:1 normal text, >=3:1 large text (>=24px, or >=19px bold) and UI/graphical objects. NOTE: brief states "#1F6F57 on white ~4.0:1"; the locked hex actually measures 6.05:1 (PASS for normal text). True figures are used here. ========================================================================== */ :root { /* ── COLOR · BRAND (LOCKED) ───────────────────────────────────────────── The green system. Trust, health, "go-safe", the check motif. */ --brand: #1F6F57; /* primary green · 6.05:1 on white (AA normal) */ --brand-deep: #0B3D31; /* deep green · 12.17:1 on white · headings/hover */ --brand-soft: #E7F0EC; /* soft tint surface · the "safe / moat" panel */ /* ── COLOR · BRAND SHADES (ADDED, derived) ────────────────────────────── For state layers and emphasis. All pass AA on white. */ --brand-400: #2E8A6E; /* lighter green · 4.22:1 on white · hover fills */ --brand-600: #1A5F4B; /* pressed / active · 7.55:1 on white */ --brand-700: #134A3A; /* deepest interactive step · 10.15:1 on white */ /* ── COLOR · INK & NEUTRALS (LOCKED) ──────────────────────────────────── Cool, slightly green-shifted neutrals — never pure cold blue-grey. */ --ink: #16201C; /* primary body text · 16.70:1 on white */ --muted: #5A6660; /* secondary text / captions · 5.99:1 on white */ --bg: #FFFFFF; /* page background · clean white */ --surface: #F4F7F6; /* cards, code, quiet fills */ --mist: #EEF2F1; /* subtle fills, zebra, hover bg */ --line: #DDE5E2; /* hairline borders / dividers */ /* ── COLOR · FUNCTIONAL & SEMANTIC ROLES ──────────────────────────────── Green carries success/safe (it IS the brand). Amber is functional only. */ --star: #E6A23C; /* LOCKED · review-star fill ONLY (decorative) */ --success: var(--brand); /* "safe / verified / published" */ --success-fg: var(--brand-deep); /* success text needing AA on light bg */ --success-soft: var(--brand-soft); /* success surface / safe callout */ --warning: #B26B00; /* warning TEXT · 4.20:1 on white (AA normal) */ --warning-soft: #FBF1DF; /* warning surface tint */ --warning-fill: #E6A23C; /* warning ICON/BADGE fill (==star amber) */ --danger: #B42318; /* error / blocked · 6.57:1 on white · white-on=6.57 */ --danger-soft: #FCEEEC; /* danger surface tint */ --info: var(--brand-deep); /* informational · stays in-palette */ --info-soft: var(--brand-soft); /* ── COLOR · DARK SURFACE SET ─────────────────────────────────────────── For dark sections built on deep green (--brand-deep). Light-mode --muted FAILS here (2.03:1) — use the dark-* tokens, all verified on --brand-deep.*/ --dark-bg: #0B3D31; /* dark section background (== brand-deep) */ --dark-surface: #0F4A3B; /* raised card on dark */ --dark-line: #1C5E4C; /* hairline on dark */ --dark-ink: #F4F7F6; /* primary text on dark · 11.29:1 */ --dark-muted: #A9BDB4; /* secondary text on dark · 6.16:1 (AA normal) */ --dark-accent: #8FD3BC; /* links / accents on dark · 7.07:1 */ /* ── COLOR · ON-BRAND (text over solid green fills) ─────────────────────*/ --on-brand: #FFFFFF; /* white on --brand · 6.05:1 (AA normal) */ --on-brand-deep: #FFFFFF; /* white on --brand-deep · 12.17:1 */ /* ── TYPOGRAPHY · FAMILIES ──────────────────────────────────────────────*/ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", Menlo, Consolas, monospace; /* ── TYPOGRAPHY · MODULAR TYPE SCALE (px) ─────────────────────────────── ~1.25 (major third), tuned. Pair with line-heights below. */ --fs-12: 0.75rem; /* 12 · micro / legal / overline */ --fs-14: 0.875rem; /* 14 · captions, UI labels, small body */ --fs-16: 1rem; /* 16 · base body (root) */ --fs-19: 1.1875rem; /* 19 · lead paragraph / large body */ --fs-24: 1.5rem; /* 24 · h3 / section subhead */ --fs-30: 1.875rem; /* 30 · h2 */ --fs-38: 2.375rem; /* 38 · h1 (mobile→tablet) */ --fs-48: 3rem; /* 48 · display / hero h1 */ /* ── TYPOGRAPHY · WEIGHTS ───────────────────────────────────────────────*/ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── TYPOGRAPHY · LINE HEIGHTS ──────────────────────────────────────────*/ --lh-tight: 1.1; /* display / hero headings */ --lh-heading: 1.2; /* h2 / h3 */ --lh-snug: 1.35; /* leads, UI */ --lh-body: 1.6; /* body copy (clinical calm = roomy) */ /* ── TYPOGRAPHY · LETTER SPACING ────────────────────────────────────────*/ --tracking-heading: -0.02em; /* all headings & wordmark */ --tracking-tight: -0.01em; /* large UI / buttons */ --tracking-wide: 0.06em; /* overlines / uppercase labels */ /* ── SPACING SCALE · 4px base ───────────────────────────────────────────*/ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ── BORDER RADIUS ──────────────────────────────────────────────────────*/ --radius-sm: 8px; /* inputs, small chips */ --radius-btn: 10px; /* buttons */ --radius-card: 14px; /* cards, panels */ --radius-lg: 20px; /* large surfaces / reversed lockup bg */ --radius-pill: 999px; /* pills, tags, avatar */ /* ── SHADOWS · subtle, calm (cool green-grey, never harsh black) ────────*/ --shadow-sm: 0 1px 2px rgba(11, 61, 49, 0.06); --shadow-md: 0 4px 12px rgba(11, 61, 49, 0.08); --shadow-lg: 0 12px 30px -16px rgba(11, 61, 49, 0.25); /* ── BORDERS ────────────────────────────────────────────────────────────*/ --border-hairline: 1px solid var(--line); /* ── LAYOUT ─────────────────────────────────────────────────────────────*/ --content-max: 1080px; /* main content column */ --content-prose: 680px; /* readable text measure */ --gutter: 24px; /* page side padding */ /* ── BREAKPOINTS (reference; use in media queries) ──────────────────────*/ --bp-sm: 480px; --bp-md: 740px; --bp-lg: 1024px; /* ── MOTION ─────────────────────────────────────────────────────────────*/ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur: 160ms; /* ── ICONOGRAPHY ────────────────────────────────────────────────────────*/ --icon-stroke: 1.75px; /* line icons · rounded caps & joins · 24px grid */ }