/* ========================================================================= 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; /* 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; --mono-chip-line: #b3ccd4; /* 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; /* 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 */ --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 */ /* 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 */ } /* Allow height/size keyword animations (smooth
expand, etc.). Progressive enhancement — ignored where unsupported. */ :root { interpolate-size: allow-keywords; } /* ---- Dark theme (harbor night) ------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1a1f; --halo-1: rgba(74, 107, 121, 0.12); --halo-2: rgba(206, 184, 168, 0.05); --panel: #16262d; --panel-2: #112026; --panel-3: #1d3038; --ink: #f1ebe1; --text: #c7cdcd; --muted: #8a9599; --line: #2c4048; --line-strong: #3c525b; --field-border: #4a636d; /* dark: a touch stronger than line-strong */ --accent: #7fa3b0; /* light harbor fill in dark → dark ink */ --accent-hover: #93b3bf; --accent-press: #a6c2cc; --accent-ink: #0e1a1f; --accent-soft: rgba(127, 163, 176, 0.16); --accent-soft-ink: #a9c5cf; /* CTA — inverted in dark: sailcloth button on the dark harbor ground */ --cta-bg: #ece3d5; --cta-ink: #16232a; --cta-hover: #f7efe1; --cta-press: #dbcfbd; --sage: #86a8b4; --sage-soft: rgba(127, 163, 176, 0.16); --sage-ink: #a9c5cf; --mint: #86a8b4; --mint-soft: rgba(127, 163, 176, 0.16); --mint-ink: #a9c5cf; --mono-accent: #7fa3b0; --mono-chip-bg: rgba(127, 163, 176, 0.20); --mono-chip-ink: #cbe0e8; --mono-chip-line: rgba(127, 163, 176, 0.34); --focus: #93b3bf; --danger-bg: #351d18; --danger-ink: #f0a99a; --danger-line: #5e352c; --success: #5f9e7e; --success-ink: #0e1a1f; --success-bg: rgba(95, 158, 126, 0.16); --warn-bg: rgba(206, 184, 168, 0.16); --warn-line: rgba(206, 184, 168, 0.42); --warn-ink: #d8c3ab; --risk-low-bg: rgba(74, 107, 121, 0.26); --risk-low-line: rgba(74, 107, 121, 0.55); --risk-low-ink: #a9c5cf; --pill-bg: rgba(127, 163, 176, 0.16); --pill-ink: #a9c5cf; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 14px 40px rgba(0, 0, 0, 0.5); --shadow-pop: 0 30px 70px rgba(0, 0, 0, 0.6); } /* System preference fallback when the user hasn't chosen explicitly. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e1a1f; --halo-1: rgba(74, 107, 121, 0.12); --halo-2: rgba(206, 184, 168, 0.05); --panel: #16262d; --panel-2: #112026; --panel-3: #1d3038; --ink: #f1ebe1; --text: #c7cdcd; --muted: #8a9599; --line: #2c4048; --line-strong: #3c525b; --field-border: #4a636d; --accent: #7fa3b0; --accent-hover: #93b3bf; --accent-press: #a6c2cc; --accent-ink: #0e1a1f; --accent-soft: rgba(127, 163, 176, 0.16); --accent-soft-ink: #a9c5cf; --cta-bg: #ece3d5; --cta-ink: #16232a; --cta-hover: #f7efe1; --cta-press: #dbcfbd; --sage: #86a8b4; --sage-soft: rgba(127, 163, 176, 0.16); --sage-ink: #a9c5cf; --mint: #86a8b4; --mint-soft: rgba(127, 163, 176, 0.16); --mint-ink: #a9c5cf; --mono-accent: #7fa3b0; --mono-chip-bg: rgba(206, 184, 168, 0.14); --mono-chip-ink: #e6dccb; --mono-chip-line: rgba(206, 184, 168, 0.28); --focus: #93b3bf; --danger-bg: #351d18; --danger-ink: #f0a99a; --danger-line: #5e352c; --success: #5f9e7e; --success-ink: #0e1a1f; --success-bg: rgba(95, 158, 126, 0.16); --warn-bg: rgba(206, 184, 168, 0.16); --warn-line: rgba(206, 184, 168, 0.42); --warn-ink: #d8c3ab; --risk-low-bg: rgba(74, 107, 121, 0.26); --risk-low-line: rgba(74, 107, 121, 0.55); --risk-low-ink: #a9c5cf; --pill-bg: rgba(127, 163, 176, 0.16); --pill-ink: #a9c5cf; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 14px 40px rgba(0, 0, 0, 0.5); --shadow-pop: 0 30px 70px rgba(0, 0, 0, 0.6); } }