/* ========================================================================== Asymmetric Investor — redesign mockup · design tokens (L1) Naming follows docs/design-system/design-tokens.md convention: .. -> --color-surface-bg, --space-comfortable No hex literals outside the palette block (DL-V1 Rule 2). ========================================================================== */ :root { /* ---- palette (the ONLY place hex may appear) ---- */ --palette-paper: #FBFAF7; --palette-paper-2: #F4F2ED; --palette-paper-3: #EAE7E0; --palette-white: #FFFFFF; --palette-ink: #16263B; --palette-ink-2: #3D4E63; --palette-ink-3: #6B7A8C; --palette-ink-4: #9AA5B1; --palette-rule: #DDD9D1; --palette-rule-strong: #C4BFB4; --palette-brass: #A87524; --palette-brass-soft: #F5EDDC; --palette-green: #1E6B49; --palette-green-soft: #E4EFE8; /* Darkened from #B5761A on 2026-09-14. MEASURED, that value scored 3.29 on its own soft fill and 3.61 on paper -- failing WCAG AA on BOTH grounds it is used on, as badge text and as freshness/alert text. It was also the colour bound to the AMBER regime badge, i.e. the most prominent severity on the site was the one a reader could least easily read. Green (5.47 / 6.18) and red (6.06 / 7.12) both passed, so this was amber alone, not a ramp-wide problem. This value scores 4.99 on soft and 5.48 on paper; the hue is preserved and only lightness moved. tests/test_severity_contrast.py asserts both denominators. */ --palette-amber: #8F5B0D; --palette-amber-soft: #FAEEDA; --palette-red: #9C2E22; --palette-red-soft: #F7E4E0; /* Dark-ground severity tints (R391). The three above are authored for paper and MEASURED against --palette-ink (#16263B) they fail WCAG AA outright: green 2.37, amber 4.05, red 2.06. Reusing them on the inverse status strip would have rendered the regime word unreadable in the site's own severity colour, which is worse than leaving it uncoloured. These tints are chosen for that ground and their ratios against #16263B are stated because a contrast claim nobody computed is not a contrast claim: green #7FBF9A -> 7.15 amber #E0A857 -> 7.21 red #E38A7C -> 5.96 All three clear AA (4.5) for body text and AAA (7.0) bar red, which clears AA comfortably. Recomputed by tests/test_severity_contrast.py, so a later palette edit cannot quietly drop one below the threshold. */ --palette-green-on-ink: #7FBF9A; --palette-amber-on-ink: #E0A857; --palette-red-on-ink: #E38A7C; --palette-slate-soft: #ECEFF2; /* ---- color.surface.* ---- */ --color-surface-bg: var(--palette-paper); --color-surface-bg-subtle: var(--palette-paper-2); --color-surface-bg-raised: var(--palette-white); --color-surface-bg-inverse: var(--palette-ink); /* Height of the sticky .pub-head, so the status strip can stick BELOW it and in-page anchors can clear it. MEASURED on the live site 2026-09-14 at 390, 600, 900, 1280 and 1920 CSS px: 59 at every width, because the header is a single-line flex whose content height does not change across breakpoints. Stated as a measurement rather than a guess; if the header ever gains a second line this token is the one thing to re-measure. */ --pub-head-h: 59px; --color-surface-bg-sunken: var(--palette-paper-3); /* ---- color.text.* (WCAG AA against every surface it pairs with) ---- */ --color-text-primary: var(--palette-ink); --color-text-secondary: var(--palette-ink-2); --color-text-tertiary: var(--palette-ink-3); --color-text-disabled: var(--palette-ink-4); --color-text-inverse: var(--palette-paper); --color-text-link: var(--palette-ink); /* ---- color.accent.* ---- */ --color-accent-primary: var(--palette-brass); --color-accent-primary-soft: var(--palette-brass-soft); --color-accent-success: var(--palette-green); --color-accent-success-soft: var(--palette-green-soft); --color-accent-warning: var(--palette-amber); --color-accent-warning-soft: var(--palette-amber-soft); --color-accent-danger: var(--palette-red); --color-accent-danger-soft: var(--palette-red-soft); --color-accent-neutral-soft: var(--palette-slate-soft); /* ---- color.border.* ---- */ --color-border: var(--palette-rule); --color-border-strong: var(--palette-rule-strong); /* ---- type.family.* ---- */ --type-family-display: "Newsreader", Georgia, "Times New Roman", serif; --type-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --type-family-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- type.scale.* ---- */ --type-scale-eyebrow: 0.6875rem; --type-scale-caption: 0.75rem; --type-scale-small: 0.8125rem; --type-scale-body: 0.9375rem; --type-scale-body-lg: 1.0625rem; --type-scale-h5: 1rem; --type-scale-h4: 1.1875rem; --type-scale-h3: 1.4375rem; --type-scale-h2: 1.875rem; --type-scale-h1: 2.5rem; --type-scale-display: clamp(2.4rem, 5.2vw, 3.9rem); --type-scale-numeral: clamp(2.6rem, 6vw, 4.2rem); /* R392: three number sizes, assigned by ROLE rather than by availability. One numeral scale meant a 55% distribution weight, a +0.27 index move and a 5% tail all rendered at up to 67px, so size carried no information -- and a figure inside a list row out-shouted the section heading above it. -headline the single figure a page is about (macro health, posture) -section a section's lead figure -row a figure inside a list row, where the ROW is the unit of comparison and the number is a label on it, not the display The existing token is kept as the headline alias so nothing silently changes size except where a role is assigned deliberately. */ --type-scale-numeral-headline: clamp(2.6rem, 6vw, 4.2rem); --type-scale-numeral-section: clamp(1.5rem, 2.6vw, 2.1rem); --type-scale-numeral-row: 1.25rem; /* ---- type.weight.* / leading / tracking ---- */ --type-weight-regular: 400; --type-weight-medium: 500; --type-weight-semibold: 600; --type-leading-tight: 1.16; --type-leading-normal: 1.45; --type-leading-relaxed: 1.62; --type-tracking-tight: -0.015em; --type-tracking-normal: 0; --type-tracking-wide: 0.09em; /* ---- space.* (8 stops, role-named) ---- */ --space-hairline: 2px; --space-dense: 4px; --space-compact: 8px; --space-comfortable: 16px; --space-airy: 24px; --space-gutter: 32px; --space-section: 56px; --space-page: 24px; /* ---- radius.* ---- */ --radius-none: 0; --radius-subtle: 3px; --radius-rounded: 999px; --radius-full: 50%; /* ---- motion.* ---- */ --motion-duration-instant: 80ms; --motion-duration-subtle: 160ms; --motion-duration-moderate: 280ms; --motion-easing-standard: cubic-bezier(0.2, 0, 0.2, 1); /* ---- elevation.* ---- */ --elevation-flat: none; --elevation-raised: 0 1px 2px rgba(22, 38, 59, 0.05); --elevation-floating: 0 8px 28px rgba(22, 38, 59, 0.11); /* ---- layout ---- */ --layout-max: 1180px; --layout-prose: 660px; } @media (min-width: 900px) { :root { --space-page: 40px; --space-section: 76px; } }