/* ============================================================================
tokens.css — the design system's vocabulary
============================================================================
Every colour, type step, space, radius and shadow the site is allowed to use.
Nothing here styles a component; shell.css and map-shell.css do that, and the
apps compose from those. If a value is needed twice, it belongs here.
Single-theme, light, Danish UI. There is deliberately no dark axis: the old
`data-appearance` light/dark switch and the `trailhead` dark palette were
retired with this redesign (ADR-0008). Do not reintroduce a theme axis by
adding a second :root block — add a token.
Load order: tokens.css → shell.css → [map-shell.css] → the app's own sheet.
The three families are NOT @imported here on purpose — an @import inside a
stylesheet cannot start downloading until this file has been fetched and
parsed, which puts the fonts one extra round-trip behind first paint. Every
page carries them in instead, so they resolve in parallel with the CSS:
The stacks below fall back to system fonts, so a page that forgets the link
degrades in weight and rhythm rather than breaking.
========================================================================= */
:root {
color-scheme: light;
/* ── Colour ──────────────────────────────────────────────────────────
Accents are used sparingly and mean something: yellow marks the single
active thing in a group, orange marks negatives and links. Yellow is
never a surface colour, and there is never a gradient wash. */
--green-900: #1F3D2B; /* primary dark: headers, nav, body text, markers */
--green-600: #4C7A5A; /* secondary: muted text, labels, graticule */
--sand-400: #D8CBB5; /* neutral map background */
--sand-100: #F4F1EA; /* page background, subtle fills inside cards */
--yellow: #F2C14E; /* active states, toggles-on, primary CTA, badges */
--orange: #D96C3F; /* warnings, negative values, links, secondary CTA*/
--surface: #FFFFFF; /* cards, panels, app container */
--border: #DED7C7; /* standard 1px border */
--border-strong:#B9AF98; /* dashed drop zones, emphasised borders */
--hairline: #E6E0D2; /* list row separators */
--faint: #8A9285; /* micro-labels, placeholders, tertiary values */
--yellow-tint: #FCF2DC; /* background of active/selected chips */
/* Map fills. Only ever used inside a map surface or an app-card icon tint. */
--map-fill-1: #C9BFA6;
--map-fill-2: #CFC6B0;
--map-fill-3: #DED2BA;
--map-sea-1: #CFDDD2;
--map-sea-2: #BFD0C3;
--map-sea-3: #C7D8CB;
--map-green-1: #AFC4B4;
--map-green-2: #DCE8DF;
--map-grey-1: #E2E5DC;
/* Inverted chrome, for the dark Punktsky viewport (Phase 3). */
--invert-fill: rgba(31, 61, 43, .6);
--invert-border: rgba(244, 241, 234, .22);
--invert-text: #F4F1EA;
/* On the green top bar. */
--on-green: #F4F1EA;
--on-green-muted: rgba(244, 241, 234, .82);
--on-green-faint: rgba(244, 241, 234, .7);
--on-green-border: rgba(244, 241, 234, .28);
--on-green-hover: rgba(244, 241, 234, .12);
/* ── Type ────────────────────────────────────────────────────────────
Three families, each with one job. Space Grotesk is for headings only
and never for running text; JetBrains Mono marks content as technical
(data, codes, coordinates, timestamps, CRS) so it reads as a different
kind of thing from the prose around it. */
--font-heading: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
--text-hero: 46px; /* h1, line-height 1.05, letter-spacing -0.02em */
--text-screen: 34px; /* h2 */
--text-panel: 24px; /* panel heading (24-26px) */
--text-card: 18px; /* card title, wordmark */
--text-body: 15px; /* body 15-17px / 1.6 */
--text-body-lg: 16px;
--text-small: 13px; /* secondary body 13-14px */
--text-row: 14px; /* list row */
--text-micro: 10px; /* micro-label, mono, uppercase, 0.1em */
--text-data: 11px; /* data chip, coordinates, mono, 0.06em */
/* ── Space ─────────────────────────────────────────────────────────── */
--space-page: 20px; /* page padding */
--space-inner: 28px; /* app container inner padding (28-32px) */
--space-panel: 20px; /* panel padding */
--gap-cards: 14px;
--gap-sections: 22px;
--gap-hero: 40px;
/* ── Radius ────────────────────────────────────────────────────────── */
--radius-container: 20px;
--radius-card: 16px; /* cards, floating panels */
--radius-card-sm: 14px; /* small cards */
--radius-input: 11px; /* inputs, segmented buttons, sheet tabs */
--radius-chip: 9px; /* chips, icon buttons */
--radius-pill: 100px; /* pills, toggles */
/* ── Elevation ─────────────────────────────────────────────────────── */
--shadow-container: 0 4px 16px rgba(31, 61, 43, .06);
--shadow-hover: 0 4px 16px rgba(31, 61, 43, .08);
--shadow-panel: 0 8px 32px rgba(31, 61, 43, .14);
--shadow-sheet: 0 -6px 20px rgba(31, 61, 43, .10);
--shadow-login: 0 12px 40px rgba(31, 61, 43, .12);
/* ── Motion ────────────────────────────────────────────────────────── */
--ease: 150ms ease; /* card hover */
--ease-state: 120ms ease; /* toggle / segmented background fade */
/* The smallest a touch target may be. Referenced, not repeated. */
--hit: 44px;
}
/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--sand-100);
color: var(--green-900);
font-family: var(--font-body);
font-size: var(--text-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 {
font-family: var(--font-heading);
font-weight: 600;
margin: 0;
line-height: 1.15;
}
h1 { font-size: var(--text-hero); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: var(--text-screen); }
h3 { font-size: var(--text-panel); }
p { margin: 0; text-wrap: pretty; }
a {
color: var(--green-900);
text-decoration: none;
transition: color var(--ease);
}
a:hover { color: var(--orange); }
button, input, select, textarea { font: inherit; color: inherit; }
/* Visible keyboard focus everywhere. The design never removes an outline
without replacing it — :focus-visible keeps it off mouse clicks only. */
:focus-visible {
outline: 2px solid var(--orange);
outline-offset: 2px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}