/* ========================================================================= HippaStrippa — Design Tokens Direction: "Safe Harbor" — a maritime palette on sailcloth cream. Harbor Navy #1e3b45 → primary accent (stepper, links, focus, [NAME]) Sea Cliff Blue #4a6b79 → secondary (trust chip, "safe" state, info) Signal Coral #dc5a4e → alert pop, used sparingly (danger, high risk) Sailcloth Cream#f1ebe1 → page + surface ladder Weathered Rope #cdb8a8 → warm counterpoint (token chips, hairlines, caution) Black (navy) #16262e → ink, body text, CTA buttons Precision serif display (Spectral) for the big moments; clean sans (Inter) for UI; mono for deterministic tokens. Surfaces are flat + hairline-bordered (a precise instrument), not pillowy — see radii/shadows below. Themes: - Light is the default (:root). - Dark applies via and as a system fallback via prefers-color-scheme when no explicit choice is made. Foreground/background pairs target WCAG 2.1 AA. Note: soft tints are light — primary fills use the deep colour (--accent) with white text, never the pale tint with white. ========================================================================= */ /* Self-hosted fonts (variable, latin). No CDN/egress — on-brand for a privacy tool. font-display:swap paints instantly with fallbacks, swaps on load. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/inter/InterVariable.woff2") format("woff2"); } /* Spectral (Production Type, OFL) — the maritime "precision" display face: refined, slightly-sharp serif reading engineered/chart-like. Static weights, only the few we use, self-hosted (no CDN egress). */ @font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/spectral/spectral-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Spectral"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/spectral/spectral-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "Spectral"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/spectral/spectral-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/spectral/spectral-latin-600-normal.woff2") format("woff2"); } :root { color-scheme: light; /* ── SURFACE & BORDER POLICY ─────────────────────────────────────────────── Surfaces differ by FILL + elevation, never by a resting stroke. Elevation ladder: --bg (page) → --panel (card: soft shadow in light, hairline in dark) → --panel-2 (inset interactive: inputs, output, method cards, disclosures — filled, NO border) → --panel-3 (nested/hover fills). A resting border appears nowhere; borders are reserved ONLY for :focus-visible rings, selected/active accent states, drag-over, and intentional dividers (footer/disclosure-open). ─────────────────────────────────────────────────────────────────────────── */ /* Surfaces — sailcloth cream paper */ --bg: #f1ebe1; --halo-1: rgba(30, 59, 69, 0.06); /* harbor navy wash */ --halo-2: rgba(74, 107, 121, 0.05); /* sea cliff wash */ --panel: #faf6ef; /* primary cards (warm near-white) */ --panel-2: #eae1d4; /* inset / output / interactive fields (filled, no border) */ --panel-3: #e1d6c5; /* subtle fills, hovered rows, ghost buttons */ /* Text — navy-charcoal ink + slate */ --ink: #16262e; /* headings (navy near-black) */ --text: #33474f; /* body */ --muted: #5c676d; /* secondary (AA on cream) */ /* Lines — weathered rope, a touch stronger than before for crisp hairline separation (flat surfaces lean on the border, not a shadow). */ --line: #d8ccba; --line-strong: #bfae97; /* Interactive-field edge — deliberately crisper than the warm lines, so inputs/selects read as precise instruments (deterministic feel), not soft fills. Light mode only; dark keeps its own below. */ --field-border: #a1937c; /* Accent — Harbor Navy (the primary confident colour) */ --accent: #1e3b45; /* deep fill, white text passes AA (~12:1) */ --accent-hover: #274a56; --accent-press: #162d35; --accent-ink: #ffffff; /* text on a solid accent fill */ --accent-soft: #dbe4e7; /* pale harbor tint background */ --accent-soft-ink: #274a56; /* CTA — navy-black (primary buttons). Harbor Navy is used for accents/spines; the confident action colour is a grounded near-black that fits the palette. */ --cta-bg: #16262e; --cta-ink: #f4eee4; --cta-hover: #21343c; --cta-press: #0f1d23; /* ── DARK BAND (landing page only) ─────────────────────────────────────── The full-bleed contrast band and the page's dark foot. This exists as its own token set for one specific reason, recorded so nobody "simplifies" it back: --accent INVERTS to a pale teal in dark theme, so `background: var(--accent)` cannot carry a dark band in both themes — it is a dark plate in light mode and a pale plate in dark mode, which flips the whole composition. --band is therefore near-black in light theme and steps to the dark theme's own panel tone in dark theme, so the band stays *the darkest surface on the page* in both. Consumed only by landing.css. */ --band: #16262e; --band-ink: #f1ebe1; /* body/heading on the band (~14:1 on --band) */ --band-muted: #b9b3a8; /* stepped-back text on the band (~7.5:1) */ --band-line: rgba(241, 235, 225, 0.16); /* Sea Cliff Blue — secondary accent (pills, "removed" counts) */ --sage: #4a6b79; --sage-soft: #dde7ea; --sage-ink: #35525e; /* Sea Cliff Blue — trust chip + "safe/calm" state */ --mint: #4a6b79; --mint-soft: #dde7ea; --mint-ink: #35525e; /* Deterministic-token chips ([NAME] [DATE] …) — cool sea-cliff wash so they pop borderless on the warm surfaces and read as the "cleaned token" colour. */ --mono-accent: #1e3b45; --mono-chip-bg: #cfe0e6; --mono-chip-ink: #2c4d59; /* Focus ring (keyboard) — Sea Cliff Blue for visibility */ --focus: #4a6b79; /* Status / danger — Signal Coral */ --danger-bg: #f7e2dc; --danger-ink: #b8402f; --danger-line: #eebfb5; /* Success — Harbor Green (a teal-leaning sea green that sits in the maritime family) */ --success: #2d6a54; --success-ink: #ffffff; --success-bg: #dcebe1; /* pale harbor-green wash (all-clear banner) */ /* Caution — weathered-rope ochre (processing notes, e.g. OCR fallbacks). A warm driftwood tone, distinct from Signal Coral (error) and Harbor Green. */ --warn-bg: #efe3cf; --warn-line: #d8c0a8; --warn-ink: #7a5c3e; /* Risk scale (exposure score) — maritime: calm blue → warm rope → coral */ --risk-low-bg: #dde7ea; --risk-low-line: #b3c6cd; --risk-low-ink: #35525e; /* Pills (summary counts) — sea cliff tint */ --pill-bg: #dde7ea; --pill-ink: #35525e; /* Radii — tightened toward a precise instrument (2026: flat, hairline, sharp). The card is 15px (was 24, no longer pillowy); internal primitives 9px. */ --r-sm: 7px; --r: 9px; --r-lg: 15px; --r-pill: 999px; /* Landing-scale radii. The app's ladder tops out at 15px on purpose (a precise instrument, not a pillow) — but the public front door is an editorial page whose defining shapes are a big rounded hero plate and bento cards, and 15px on a 730px-wide plate reads as an accident rather than a decision. These two steps exist ONLY for that: they are consumed exclusively by landing.css, so /app's surfaces are byte-identical. Do not adopt them in site.css without a separate reviewed pass. */ --r-xl: 20px; --r-2xl: 28px; /* Elevation — hairline-first. Surfaces separate by a 1px border + one very subtle shadow, not layered soft glows. --shadow-pop stays for the modal. */ --shadow-1: 0 1px 2px rgba(20, 34, 42, 0.06); --shadow-2: 0 2px 4px rgba(20, 34, 42, 0.05), 0 8px 24px rgba(20, 34, 42, 0.06); --shadow-pop: 0 24px 60px rgba(14, 26, 32, 0.30); /* Type — families */ --font-display: "Spectral", Georgia, "Times New Roman", serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", monospace; /* Type — one scale (use these, not ad-hoc rem values) */ --fs-eyebrow: 0.72rem; /* uppercase section labels */ --fs-xs: 0.8rem; /* hints, meta */ --fs-sm: 0.88rem; /* secondary body, notes, buttons */ --fs-base: 0.95rem; /* controls, primary body */ --fs-lg: 1.05rem; /* emphasis / result headline */ --fs-display: clamp(1.7rem, 1.1rem + 1.5vw, 2.5rem); /* Spectral step headings */ --fs-hero: clamp(2.75rem, 1.9rem + 4.2vw, 5.25rem); /* landing-hero headline only */ /* Landing section headings — the missing rung between --fs-display (an app step label) and --fs-hero. The reference pages' section heads are roughly half the hero, and --fs-display's 2.5rem ceiling is far below that, which is why every landing section previously read as the same weight as its body. Consumed only by landing.css. */ --fs-section: clamp(2rem, 1.35rem + 2.2vw, 3.15rem); --lh-tight: 1.12; --lh: 1.55; --tracking-eyebrow: 0.1em; /* Spacing — 4px base scale (use these for gaps/padding/margins) */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ /* Landing-scale section rhythm. The app never needs a gap this large (it is a single-viewport tool); a scrolling editorial page does — the "generous whitespace" in the reference sites IS this step, not a bigger --space-7. Consumed only by landing.css. */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ /* Document measure — legal.css's .legal-shell and getting-started.css's .gs-shell both hand-typed 46rem as their reading width before this token existed (the same raw-number-typed-twice pattern flagged elsewhere in this codebase). One number, one place to change it. */ --measure-doc: 46rem; /* Document type scale — Privacy/Terms/Getting Started. Same pattern as --measure-doc above: legal.css and getting-started.css had each hand-typed their own copy of the section-heading size and the rhythm around it (1.15rem, 2.1rem/1.1rem/0.75rem-or-1rem, 1.65-or-1.6 line-height) — both "token-driven" in isolation, but never reading from the same number, so they were free to drift and quietly had (see the 2026-08 typography audit that caught it). One scale now, consumed by both files. Deliberately its own step, not fs-lg/fs-display: 1.15rem sits in the real gap between them (1.05 → 2.5), and --lh-doc is looser than the app's --lh (1.55) because a document is read top-to-bottom, not scanned as a control. */ --fs-doc-h2: 1.15rem; --lh-doc: 1.6; --doc-h2-gap-top: 2.1rem; /* space + divider above a document h2 */ --doc-h2-gap-bottom: 0.75rem; /* space below a document h2, before its first paragraph */ --doc-h2-pad-top: 1.1rem; /* gap between the divider rule and the h2 text */ /* Controls */ --control-h: 2.75rem; /* 44px — WCAG touch target */ /* Motion — one easing + a small duration set (use these) */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 120ms; /* micro: hover, focus ring */ --dur-2: 220ms; /* small state changes: colour, stepper */ --dur-3: 320ms; /* content reveal / cross-fade */ --dur-4: 440ms; /* slide / large motion */ /* ── DARK PALETTE — single source of truth ───────────────────────────── Every literal dark-mode colour value is typed exactly ONCE, here, on :root (custom properties inherit, and :root always matches). The two dark-mode rulesets below — :root[data-theme="dark"] and the prefers-color-scheme fallback — are pure var(--dark-*) references and nothing else, so they are textually identical to each other (asserted by LandingStyleContractTests' dark-parity test). A future edit that touches only one of those blocks now produces an obvious one-line diff instead of a silent fork. This replaces two independently hand-typed copies that had already drifted: --mono-chip-bg/-ink were sea-cliff blue in one block and rope-tan in the other (Stage 1a bug). Resolved to sea-cliff below — the documented intent per the chip comment above and docs/design-system.md — because prefers-color-scheme wins on specificity whenever the OS is dark, so rope-tan was the drift, not sea-cliff the intent. ────────────────────────────────────────────────────────────────────── */ --dark-bg: #0e1a1f; --dark-halo-1: rgba(74, 107, 121, 0.12); --dark-halo-2: rgba(206, 184, 168, 0.05); --dark-panel: #16262d; --dark-panel-2: #112026; --dark-panel-3: #1d3038; --dark-ink: #f1ebe1; --dark-text: #c7cdcd; --dark-muted: #8a9599; --dark-line: #2c4048; --dark-line-strong: #3c525b; --dark-field-border: #4a636d; --dark-accent: #7fa3b0; --dark-accent-hover: #93b3bf; --dark-accent-press: #a6c2cc; --dark-accent-ink: #0e1a1f; --dark-accent-soft: rgba(127, 163, 176, 0.16); --dark-accent-soft-ink: #a9c5cf; --dark-cta-bg: #ece3d5; --dark-cta-ink: #16232a; --dark-cta-hover: #f7efe1; --dark-cta-press: #dbcfbd; /* Dark band, dark theme — steps to the panel tone (see the --band comment on the light block for why this is not --dark-accent). Still the darkest- reading plate on the page because everything around it is --dark-bg with lifted panels; the band keeps its identity through the hairline + ink pair rather than through being darker than the page. */ --dark-band: #16262d; --dark-band-ink: #f1ebe1; --dark-band-muted: #8a9599; --dark-band-line: rgba(241, 235, 225, 0.12); --dark-sage: #86a8b4; --dark-sage-soft: rgba(127, 163, 176, 0.16); --dark-sage-ink: #a9c5cf; --dark-mint: #86a8b4; --dark-mint-soft: rgba(127, 163, 176, 0.16); --dark-mint-ink: #a9c5cf; --dark-mono-accent: #7fa3b0; --dark-mono-chip-bg: rgba(127, 163, 176, 0.20); /* sea-cliff — see note above */ --dark-mono-chip-ink: #cbe0e8; /* sea-cliff — see note above */ --dark-focus: #93b3bf; --dark-danger-bg: #351d18; --dark-danger-ink: #f0a99a; --dark-danger-line: #5e352c; --dark-success: #5f9e7e; --dark-success-ink: #0e1a1f; --dark-success-bg: rgba(95, 158, 126, 0.16); --dark-warn-bg: rgba(206, 184, 168, 0.16); --dark-warn-line: rgba(206, 184, 168, 0.42); --dark-warn-ink: #d8c3ab; --dark-risk-low-bg: rgba(74, 107, 121, 0.26); --dark-risk-low-line: rgba(74, 107, 121, 0.55); --dark-risk-low-ink: #a9c5cf; --dark-pill-bg: rgba(127, 163, 176, 0.16); --dark-pill-ink: #a9c5cf; --dark-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --dark-shadow-2: 0 14px 40px rgba(0, 0, 0, 0.5); --dark-shadow-pop: 0 30px 70px rgba(0, 0, 0, 0.6); } /* Allow height/size keyword animations (smooth
expand, etc.). Progressive enhancement — ignored where unsupported. */ :root { interpolate-size: allow-keywords; } /* ---- Dark theme (harbor night) ------------------------------------------- Both this block and the prefers-color-scheme fallback below are deliberately flat var(--dark-*) reference lists — no literal colour value is typed in either. The two blocks are textually identical (selector and indentation aside), which the dark-parity test in LandingStyleContractTests.cs asserts byte-for-byte. If you're tempted to hand-tune a value in only one of these two blocks: don't — edit the --dark-* source on :root instead, above. That's the whole fix for the sea-cliff/rope-tan chip-colour drift this structure closes. */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--dark-bg); --halo-1: var(--dark-halo-1); --halo-2: var(--dark-halo-2); --panel: var(--dark-panel); --panel-2: var(--dark-panel-2); --panel-3: var(--dark-panel-3); --ink: var(--dark-ink); --text: var(--dark-text); --muted: var(--dark-muted); --line: var(--dark-line); --line-strong: var(--dark-line-strong); --field-border: var(--dark-field-border); --accent: var(--dark-accent); --accent-hover: var(--dark-accent-hover); --accent-press: var(--dark-accent-press); --accent-ink: var(--dark-accent-ink); --accent-soft: var(--dark-accent-soft); --accent-soft-ink: var(--dark-accent-soft-ink); --cta-bg: var(--dark-cta-bg); --cta-ink: var(--dark-cta-ink); --cta-hover: var(--dark-cta-hover); --cta-press: var(--dark-cta-press); --band: var(--dark-band); --band-ink: var(--dark-band-ink); --band-muted: var(--dark-band-muted); --band-line: var(--dark-band-line); --sage: var(--dark-sage); --sage-soft: var(--dark-sage-soft); --sage-ink: var(--dark-sage-ink); --mint: var(--dark-mint); --mint-soft: var(--dark-mint-soft); --mint-ink: var(--dark-mint-ink); --mono-accent: var(--dark-mono-accent); --mono-chip-bg: var(--dark-mono-chip-bg); --mono-chip-ink: var(--dark-mono-chip-ink); --focus: var(--dark-focus); --danger-bg: var(--dark-danger-bg); --danger-ink: var(--dark-danger-ink); --danger-line: var(--dark-danger-line); --success: var(--dark-success); --success-ink: var(--dark-success-ink); --success-bg: var(--dark-success-bg); --warn-bg: var(--dark-warn-bg); --warn-line: var(--dark-warn-line); --warn-ink: var(--dark-warn-ink); --risk-low-bg: var(--dark-risk-low-bg); --risk-low-line: var(--dark-risk-low-line); --risk-low-ink: var(--dark-risk-low-ink); --pill-bg: var(--dark-pill-bg); --pill-ink: var(--dark-pill-ink); --shadow-1: var(--dark-shadow-1); --shadow-2: var(--dark-shadow-2); --shadow-pop: var(--dark-shadow-pop); } /* System preference fallback when the user hasn't chosen explicitly. See the block comment above :root[data-theme="dark"] — this must stay textually identical to that block. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--dark-bg); --halo-1: var(--dark-halo-1); --halo-2: var(--dark-halo-2); --panel: var(--dark-panel); --panel-2: var(--dark-panel-2); --panel-3: var(--dark-panel-3); --ink: var(--dark-ink); --text: var(--dark-text); --muted: var(--dark-muted); --line: var(--dark-line); --line-strong: var(--dark-line-strong); --field-border: var(--dark-field-border); --accent: var(--dark-accent); --accent-hover: var(--dark-accent-hover); --accent-press: var(--dark-accent-press); --accent-ink: var(--dark-accent-ink); --accent-soft: var(--dark-accent-soft); --accent-soft-ink: var(--dark-accent-soft-ink); --cta-bg: var(--dark-cta-bg); --cta-ink: var(--dark-cta-ink); --cta-hover: var(--dark-cta-hover); --cta-press: var(--dark-cta-press); --band: var(--dark-band); --band-ink: var(--dark-band-ink); --band-muted: var(--dark-band-muted); --band-line: var(--dark-band-line); --sage: var(--dark-sage); --sage-soft: var(--dark-sage-soft); --sage-ink: var(--dark-sage-ink); --mint: var(--dark-mint); --mint-soft: var(--dark-mint-soft); --mint-ink: var(--dark-mint-ink); --mono-accent: var(--dark-mono-accent); --mono-chip-bg: var(--dark-mono-chip-bg); --mono-chip-ink: var(--dark-mono-chip-ink); --focus: var(--dark-focus); --danger-bg: var(--dark-danger-bg); --danger-ink: var(--dark-danger-ink); --danger-line: var(--dark-danger-line); --success: var(--dark-success); --success-ink: var(--dark-success-ink); --success-bg: var(--dark-success-bg); --warn-bg: var(--dark-warn-bg); --warn-line: var(--dark-warn-line); --warn-ink: var(--dark-warn-ink); --risk-low-bg: var(--dark-risk-low-bg); --risk-low-line: var(--dark-risk-low-line); --risk-low-ink: var(--dark-risk-low-ink); --pill-bg: var(--dark-pill-bg); --pill-ink: var(--dark-pill-ink); --shadow-1: var(--dark-shadow-1); --shadow-2: var(--dark-shadow-2); --shadow-pop: var(--dark-shadow-pop); } }