/**
* Charter design tokens — PORTED FROM THE APP.
*
* This is a deliberate copy of the token block and base element styles
* in `frontend/src/app/globals.css`, not an import: the landing site is
* a standalone static bundle with no build step, so it cannot reach
* into the Next.js app's CSS. The copy is the cost of the landing page
* staying up when the app is down.
*
* KEEP IN SYNC. If a palette value changes in the app, change it here
* too, or the marketing site and the product will drift apart visually.
* Everything below is verbatim from globals.css except:
* - the font stacks fall back to the Google Fonts in each
* page's rather than next/font's generated variables;
* - app-only utilities (.machine, form resets) are dropped.
*
* Contrast notes from the app's token file apply here unchanged. Two
* pairs in the approved Charter palette sit below the 4.5:1 body-text
* floor and are used ONLY at large sizes or as UI, never as body copy:
* - DARK --color-accent-text #c93c34 on --color-surface is 3.1:1
* (wordmark, inline links — clears the 3:1 large-text/UI floor).
* - LIGHT --color-highlight #a97b18 as TEXT is 3.5:1 on
* --color-surface. Used here as a FILL and as rules only; gold-toned
* type on the light canvas uses --color-numeral (#6b4a22, 6.8–7.4:1).
*/
/* --- Fonts, self-hosted -------------------------------------------
The three Charter families, served from this origin rather than
fetched from fonts.googleapis.com. Same files the app ships (see
`frontend/src/app/fonts/`), latin subset, woff2.
Local rather than Google for three reasons: it removes a
render-blocking request to a third party on every visit; it removes
the third-party transfer that EU privacy guidance treats Google Fonts
as; and it lets the CSP in `_headers` drop to `'self'` for both
style-src and font-src.
Only the weights this site actually uses are shipped. Spectral is not
a variable font, so it is one file per weight — 400 (the thesis
closer), 700 (h2, row terms) and 800 (h1, wordmark); no italics,
because nothing here is italic. Archivo and JetBrains Mono ARE
variable, so one file each covers every weight the CSS asks for.
Adding a new weight means adding a file here.
`font-display: swap` matches the app: text paints immediately in the
fallback and reflows when the face arrives, rather than being
invisible. The token stacks below name these same families, so a
failed load still lands on the system fallback. */
@font-face {
font-family: "Spectral";
src: url("/assets/fonts/spectral-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Spectral";
src: url("/assets/fonts/spectral-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Spectral";
src: url("/assets/fonts/spectral-800.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Archivo";
src: url("/assets/fonts/archivo-100-900.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/assets/fonts/jetbrains-mono-100-800.woff2") format("woff2");
font-weight: 100 800;
font-style: normal;
font-display: swap;
}
:root {
color-scheme: light;
/* Surfaces & text — parchment canvas, ink text */
--color-bg: #f4ecdc;
--color-surface: #fbf6ea;
--color-surface-alt: #ebdfc6;
--color-surface-sunken: #f7f1e3;
--color-border: #d9c9a6;
--color-border-soft: #e6dcc4;
--color-border-strong: #1c3f75;
--color-text: #1c2534;
--color-text-muted: #625b4c;
/* Semantic — azure acts, gold values, oak numbers */
--color-accent: #1c3f75;
--color-accent-text: #1c3f75;
--color-accent-hover: #142e56;
--color-accent-contrast: #f4ecdc;
--color-highlight: #a97b18;
--color-highlight-strong: #cfa13a;
--color-highlight-contrast: #1c2534;
--color-numeral: #6b4a22;
--color-success: #2c6b40;
--color-success-bg: #e2efe2;
--color-caution: #8a6413;
--color-caution-bg: #f4e6c4;
--color-danger: #a3271e;
--color-danger-bg: #f6e0dd;
--color-danger-contrast: #ffffff;
--color-focus-ring: #1c3f75;
/* Decorative (non-text UI only) */
--gradient-accent: linear-gradient(90deg, #1c3f75 0%, #cfa13a 100%);
--gradient-gold: linear-gradient(90deg, #a97b18 0%, #cfa13a 100%);
--gradient-heading: linear-gradient(135deg, #1c3f75 0%, #a97b18 100%);
--page-glow:
radial-gradient(40rem 20rem at 92% -6%, rgba(207, 161, 58, 0.2), transparent 62%),
radial-gradient(34rem 18rem at 2% 2%, rgba(28, 63, 117, 0.06), transparent 58%);
/* Spacing scale */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
/* Radii — Charter is nearly square; hairlines carry structure. */
--radius-sm: 0.25rem;
--radius-md: 0.3125rem;
--radius-lg: 0.375rem;
--radius-full: 999px;
/* Type. The three Charter families load from the Google Fonts
in each page's ; the fallbacks keep this file standalone, so
a blocked font request degrades to system faces rather than to an
unstyled page. */
--font-sans: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--font-display: Spectral, "Iowan Old Style", Palatino, Georgia, serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.1875rem;
--text-xl: 1.5rem;
--text-2xl: 2.125rem;
--text-3xl: 2.75rem;
--leading-tight: 1.05;
--leading-snug: 1.22;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
/* The recurring uppercase-mono metadata label. */
--label-size: 0.65625rem;
--label-tracking: 0.1em;
--label-weight: 700;
/* Layout & elevation. */
--content-max-width: 72rem;
--shadow-sm: 0 1px 0 #e6dcc4;
--shadow-md: 0 1px 0 #e6dcc4, 0 8px 20px rgba(28, 37, 52, 0.06);
--shadow-lg: 0 1px 0 #e6dcc4, 0 12px 30px rgba(28, 37, 52, 0.1);
}
/* --- DARK: charcoal / graphite / crimson / brass -------------------
Declared twice, exactly as the app does it, so an explicit toggle
choice and the OS preference resolve to the same values. Keep the two
copies in sync with each other AND with globals.css. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--color-bg: #1a1919;
--color-surface: #242323;
--color-surface-alt: #363537;
--color-surface-sunken: #1f1e1e;
--color-border: #474647;
--color-border-soft: #363537;
--color-border-strong: #7f0604;
--color-text: #e6e2d9;
--color-text-muted: #a09d99;
--color-accent: #7f0604;
--color-accent-text: #c93c34;
--color-accent-hover: #9a0b08;
--color-accent-contrast: #f7f2ea;
--color-highlight: #c9a24a;
--color-highlight-strong: #dcb96b;
--color-highlight-contrast: #1a1919;
--color-numeral: #c9a24a;
--color-success: #8fd0a0;
--color-success-bg: #28302a;
--color-caution: #dcb96b;
--color-caution-bg: #332f26;
--color-danger: #f18b7e;
--color-danger-bg: #331f1d;
--color-danger-contrast: #1a1919;
--color-focus-ring: #c93c34;
--gradient-accent: linear-gradient(90deg, #7f0604 0%, #c9a24a 100%);
--gradient-gold: linear-gradient(90deg, #c9a24a 0%, #dcb96b 100%);
--gradient-heading: linear-gradient(135deg, #e6e2d9 0%, #c9a24a 100%);
--page-glow:
radial-gradient(40rem 20rem at 92% -6%, rgba(127, 6, 4, 0.26), transparent 62%),
radial-gradient(34rem 18rem at 2% 2%, rgba(201, 162, 74, 0.06), transparent 58%);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 20px 44px rgba(0, 0, 0, 0.6);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--color-bg: #1a1919;
--color-surface: #242323;
--color-surface-alt: #363537;
--color-surface-sunken: #1f1e1e;
--color-border: #474647;
--color-border-soft: #363537;
--color-border-strong: #7f0604;
--color-text: #e6e2d9;
--color-text-muted: #a09d99;
--color-accent: #7f0604;
--color-accent-text: #c93c34;
--color-accent-hover: #9a0b08;
--color-accent-contrast: #f7f2ea;
--color-highlight: #c9a24a;
--color-highlight-strong: #dcb96b;
--color-highlight-contrast: #1a1919;
--color-numeral: #c9a24a;
--color-success: #8fd0a0;
--color-success-bg: #28302a;
--color-caution: #dcb96b;
--color-caution-bg: #332f26;
--color-danger: #f18b7e;
--color-danger-bg: #331f1d;
--color-danger-contrast: #1a1919;
--color-focus-ring: #c93c34;
--gradient-accent: linear-gradient(90deg, #7f0604 0%, #c9a24a 100%);
--gradient-gold: linear-gradient(90deg, #c9a24a 0%, #dcb96b 100%);
--gradient-heading: linear-gradient(135deg, #e6e2d9 0%, #c9a24a 100%);
--page-glow:
radial-gradient(40rem 20rem at 92% -6%, rgba(127, 6, 4, 0.26), transparent 62%),
radial-gradient(34rem 18rem at 2% 2%, rgba(201, 162, 74, 0.06), transparent 58%);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 20px 44px rgba(0, 0, 0, 0.6);
}
/* --- Base elements (ported from globals.css) ---------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100%;
scroll-behavior: smooth;
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
color: var(--color-text);
background-color: var(--color-bg);
background-image: var(--page-glow);
background-attachment: fixed;
background-repeat: no-repeat;
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4 {
line-height: var(--leading-snug);
font-weight: 700;
letter-spacing: -0.02em;
}
/* Charter puts the serif on ALL section headings, not just h1 — it's
what makes the site read like an edition rather than an app. */
h1,
h2 {
font-family: var(--font-display);
}
h1 {
line-height: var(--leading-tight);
font-weight: 800;
letter-spacing: -0.03em;
}
a {
color: inherit;
text-decoration: none;
}
/* Inline prose links (not nav/buttons, which set their own colour). */
p a,
li a {
color: var(--color-accent-text);
text-decoration: underline;
text-underline-offset: 2px;
}
p a:hover,
li a:hover {
color: var(--color-accent-hover);
}
button {
font-family: inherit;
}
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
img,
svg {
max-width: 100%;
}
/* Shared utility: the uppercase-mono metadata label used for statuses
and section eyebrows. */
.label {
font-family: var(--font-mono);
font-size: var(--label-size);
font-weight: var(--label-weight);
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--color-text-muted);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}