/* CostCompass — Color & Type tokens
* Authoritative source: doc/DESIGN.md and frontend/src/index.css + tailwind.config.js
* Brand: Almanac / field-survey / ordnance-survey. Earth, ink, copper. No neon.
*/
/* Canonical font load for EVERY page that links this file — the landing page,
* the blog/guides chrome, AND the standalone pages (tos / privacy / security)
* and design previews that have no of their own to edit. One
* declaration, no per-page copy to drift.
*
* High-traffic pages (Landing_Page.html, blog SiteChrome.astro) ADDITIONALLY
* put a preconnect + to this exact URL. An @import is invisible
* to the browser's preload scanner — it can't be discovered until this
* stylesheet is fetched and parsed — so on its own it lands the font swap after
* first paint (the FOUT/reflow). The starts the same fetch at the
* very start of the load, which removes that swap; because it's the same URL,
* the browser dedupes to a single download and this @import then resolves from
* cache. Keep the URL identical in all three places. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,0..100&family=Instrument+Sans:wght@400..700&family=JetBrains+Mono:wght@400;500;600&display=swap");
:root {
color-scheme: light;
/* ── Paper (bone) ─────────────────────────── */
--bone-50: #fdfbf7; /* surface / card */
--bone-100: #faf7f2; /* page background */
--bone-200: #f3eee3;
--bone-300: #e8e2d6; /* rule, hairlines */
--bone-400: #cfc7b6;
/* ── Ink ──────────────────────────────────── */
--ink: #111111; /* body text, primary ink */
--ink-soft: #262626; /* secondary text — midway between ink and original soft */
--ink-muted: #6b6b6b; /* tertiary, captions */
--ink-faint: #9a9a9a; /* mono labels, timestamps */
/* ── Copper (accent) ──────────────────────── */
--copper-50: #fbf3e8; /* copper wash for selected rows */
--copper-200: #e8c79a;
--copper-400: #d4a574;
--copper-600: #b5651d; /* survey marks, primary accent */
--copper-700: #8f4e14; /* hover state for copper */
/* Stable copper for the "Beta" tag — mirrors --copper-600 but is NOT
remapped by the landing page's copper-intensity control (App.jsx sets
--copper-600 on body), so the tag matches across the landing and the
Astro pages (blog/guides/providers). */
--beta-accent: #b5651d;
/* ── Signals (status only) ────────────────── */
--signal-success: #2d7a3f; /* muted forest */
--signal-warn: #b9801c; /* ochre */
--signal-danger: #8b2b2b; /* brick */
/* ── Semantic roles ───────────────────────── */
--bg: var(--bone-100);
--surface: var(--bone-50);
--fg: var(--ink);
--fg-soft: var(--ink-soft);
--fg-muted: var(--ink-muted);
--fg-faint: var(--ink-faint);
--accent: var(--copper-600);
--accent-hover: var(--copper-700);
--rule: var(--bone-300);
--selection: rgba(181, 101, 29, 0.22);
/* ── Type system ──────────────────────────── */
--font-display: "Fraunces", ui-serif, Georgia, serif;
--font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
/* sizes mapped to DESIGN.md scale */
--fs-display-xl: 7.5rem; /* 120px — hero money */
--fs-display-lg: 5rem; /* 80px */
--fs-h1: 2.5rem; /* 40px — page titles */
--fs-h2: 1.625rem; /* 26px — card titles */
--fs-h3: 1.375rem; /* 22px — service names */
--fs-body: 0.9375rem; /* 15px */
--fs-small: 0.8125rem; /* 13px */
--fs-label: 0.6563rem; /* 10.5px — small-caps labels */
--fs-mono: 0.6875rem; /* 11px — mono-label */
--lh-display: 0.9;
--lh-tight: 1.05;
--lh-body: 1.5;
--tracking-label: 0.16em;
--tracking-mono: 0.02em;
--tracking-tight: -0.035em;
/* ── Shadow / border ──────────────────────── */
--shadow-plate:
0 1px 0 rgba(17, 17, 17, 0.04), 0 0 0 1px rgba(17, 17, 17, 0.06);
--border-hair: 1px solid rgba(17, 17, 17, 0.1);
/* ── Spacing scale (for consistency) ──────── */
--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;
}
.dark {
color-scheme: dark;
--bone-50: #1e1b18; /* surface */
--bone-100: #0f0d0b; /* page bg */
--bone-200: #252220;
--bone-300: #373430; /* rule */
--bone-400: #4a4640;
--ink: #ede8de;
--ink-soft: #dbd5ca; /* midway between ink and original soft */
--ink-muted: #969084;
--ink-faint: #6e685e;
--copper-600: #d4a574;
--copper-700: #b5651d;
--beta-accent: #d4a574; /* see :root note — stable Beta-tag copper */
--bg: var(--bone-100);
--surface: var(--bone-50);
--fg: var(--ink);
--fg-soft: var(--ink-soft);
--fg-muted: var(--ink-muted);
--fg-faint: var(--ink-faint);
--accent: var(--copper-600);
}
/* ───────── Base ───────── */
html,
body {
background: var(--bg);
color: var(--fg);
}
body {
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* The almanac dot grid — subtle chart field under content. */
background-image: radial-gradient(
rgba(17, 17, 17, 0.045) 1px,
transparent 1px
);
background-size: 22px 22px;
}
::selection {
background: var(--selection);
}
/* ───────── Semantic type ───────── */
h1,
.h1 {
font-family: var(--font-display);
font-size: var(--fs-h1);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
font-optical-sizing: auto;
font-variation-settings:
"opsz" 144,
"SOFT" 30;
}
h2,
.h2 {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
}
h3,
.h3 {
font-family: var(--font-display);
font-size: var(--fs-h3);
line-height: var(--lh-tight);
}
p {
font-size: var(--fs-body);
color: var(--fg);
}
/* Display numbers — tabular, engraved feel. Use for money. */
.display {
font-family: var(--font-display);
font-optical-sizing: auto;
font-variation-settings:
"opsz" 144,
"SOFT" 30;
font-feature-settings:
"tnum" 1,
"ss01",
"ss02";
letter-spacing: var(--tracking-tight);
}
.display-xl {
font-size: var(--fs-display-xl);
line-height: var(--lh-display);
letter-spacing: -0.04em;
}
.display-lg {
font-size: var(--fs-display-lg);
line-height: 0.95;
letter-spacing: -0.03em;
}
.tabular,
.tabular * {
font-variant-numeric: tabular-nums;
font-feature-settings:
"tnum" 1,
"ss01";
}
/* Small-caps almanac label — sits above values like a field notation. */
.label {
font-family: var(--font-sans);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: rgba(17, 17, 17, 0.55);
}
.label-copper {
color: var(--copper-600);
}
/* Mono label — for states, timestamps, units. */
.mono-label {
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--tracking-mono);
color: rgba(17, 17, 17, 0.65);
}
code,
.code,
kbd {
font-family: var(--font-mono);
font-size: 0.8125rem;
}
/* ───────── Structural motifs ───────── */
/* Hairline rule with copper end-cap — used between sections. */
.hairline {
position: relative;
height: 1px;
background: var(--rule);
}
.hairline::after {
content: "";
position: absolute;
right: 0;
top: -2px;
width: 16px;
height: 5px;
background: var(--copper-600);
}
/* Corner tick marks — L-brackets at card corners (crop-mark feel). */
.tick-corners {
position: relative;
}
.tick-corners::before,
.tick-corners::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border: 1px solid var(--ink);
pointer-events: none;
}
.tick-corners::before {
top: -1px;
left: -1px;
border-right: none;
border-bottom: none;
}
.tick-corners::after {
bottom: -1px;
right: -1px;
border-left: none;
border-top: none;
}
/* Plate-press card */
.card {
background: var(--surface);
border: var(--border-hair);
box-shadow: var(--shadow-plate);
padding: var(--space-6);
}