/* Climbr CVI V1.1 design tokens — copied verbatim from the brand folder
 * (OneDrive/CODING/Climbr.dk/CVI/Climbr-CVI_tokens.css), which is the source
 * of truth. Don't edit here: update the CVI and copy it in again. */
/* Climbr — generated from tokens.json */
:root, [data-theme="light"] {
  --paper: #fcf9f9; /* Page background. The ground everything sits on. */
  --surface: #ffffff; /* Raised planes: map sheets, popovers, the profile plate, table headers when sticky. */
  --sunken: #f5f2f0; /* Recessed areas: input wells, code, the track behind a segmented control. */
  --hairline: #e3dedd; /* 1px rules between rows and sections. Decorative only, never the only boundary of a control. */
  --line-strong: #928a88; /* Control borders, chart axes and the profile baseline: anything that must be seen (3.2:1 or better on paper and surface in both themes). */
  --muted: #6e6765; /* Secondary text: labels, captions, units, metadata. Reads on paper and surface (5.3:1 light, 7.7:1 dark). */
  --ink: #1a1a1a; /* Primary text and icons on paper and surface (16:1 in both themes). */
  --red: #d7263d; /* Climbr Red, the same value in both themes. The logo, the selected climb line, primary buttons, the summit dot. As a line or shape on dark paper and surface it holds 3.6:1 or better. Use sparingly: one red thing per view is the rule of thumb. */
  --red-text: #c51b32; /* Red used as text or a link on paper and surface (5.6:1 light, 6.7:1 dark). */
  --on-red: #ffffff; /* Text and icons on a red fill (5.0:1 in both themes). */
  --blue: #185fb3; /* Fjord Blue, the complement to Climbr Red. Descents, water, secondary data, informational states. Never competes with red for the same job. */
  --blue-text: #185fb3; /* Blue used as text on paper and surface (6.3:1 light, 8.4:1 dark). */
  --focus: #185fb3; /* Keyboard focus ring, 2px solid with 2px offset. Meets 3:1 on every surface in both themes. */
  --grade-up-1: #ffd7cd; /* Uphill step 1: under 3 %. Profile fills; data only. */
  --grade-up-2: #fda295; /* Uphill step 2: 3-6 %. Profile fills; data only. */
  --grade-up-3: #f26a64; /* Uphill step 3: 6-9 %. Profile fills; data only. */
  --grade-up-4: #d7263d; /* Uphill step 4: 9-15 %. Same value as Climbr Red. Profile fills; data only. */
  --grade-up-5: #821828; /* Uphill step 5: 15 % and steeper. Profile fills; data only. */
  --grade-down-1: #cce5fb; /* Downhill step 1: under 3 %. Profile fills for descents; data only. */
  --grade-down-2: #95c3ef; /* Downhill step 2: 3-6 %. Profile fills for descents; data only. */
  --grade-down-3: #619fe3; /* Downhill step 3: 6-9 %. Profile fills for descents; data only. */
  --grade-down-4: #185fb3; /* Downhill step 4: 9-15 %. Same value as Fjord Blue. Profile fills for descents; data only. */
  --grade-down-5: #123b75; /* Downhill step 5: 15 % and steeper. Profile fills for descents; data only. */
  --classic-flat: #c6c6c6; /* Classic scale, 0 % and below: flat ground and descents. Neutral grey with no warm tint. */
  --classic-green: #44aa5a; /* Classic scale, above 0 and under 3 %. */
  --classic-blue: #185fb3; /* Classic scale, 3-6 %. */
  --classic-red: #d7263d; /* Classic scale, 6-9 %. */
  --classic-black: #1a1a1a; /* Classic scale, 9-15 %. In dark theme a near-black neutral grey (#2B2B2B), halfway between the light-theme black and graphite, so it still separates from the page. Only 1.4:1 on dark paper; the profile's ink top line carries the shape. */
  --classic-purple: #792d9e; /* Classic scale, 15 % and steeper. */
  --climb-1: #7dd774; /* Climb difficulty class 1 (Let). Map markers and table chips; always shown with its numeral. */
  --climb-2: #f3cf31; /* Climb difficulty class 2 (Moderat). Map markers and table chips; always shown with its numeral. */
  --climb-3: #f3821d; /* Climb difficulty class 3 (Hård). Map markers and table chips; always shown with its numeral. */
  --climb-4: #d7263d; /* Climb difficulty class 4 (Meget hård). Map markers and table chips; always shown with its numeral. */
  --climb-5: #831826; /* Climb difficulty class 5 (Ekstrem). Map markers and table chips; always shown with its numeral. */
  --on-climb-light: #1a1a1a; /* Numeral on climb-1, climb-2 and climb-3 markers. */
  --on-climb-dark: #ffffff; /* Numeral on climb-4 and climb-5 markers. */
  --map-land: #f7f7f4; /* Muted basemap land. The map is quiet so climbs carry the colour. */
  --map-water: #ddeaf2; /* Muted basemap water. */
  --map-road: #ffffff; /* Basemap roads. */
  --map-contour: #ddd6cf; /* Contour lines and hillshade tint. */
  --chart-1: #d7263d; /* Graphics palette, series 1: Climbr Red. Always the subject or the one thing being highlighted. */
  --chart-2: #185fb3; /* Graphics palette, series 2: Fjord Blue. Comparison series. */
  --chart-3: #158561; /* Graphics palette, series 3: Skov (forest green). */
  --chart-4: #d0901e; /* Graphics palette, series 4: Rug (rye). Fills and thick marks only; 2.6:1 on light paper, so never thin lines or text there. */
  --chart-5: #8b4486; /* Graphics palette, series 5: Lyng (heather). */
  --chart-6: #657383; /* Graphics palette, series 6: Skifer (slate). "Other", averages, reference lines and everything not highlighted. */
  --tint-warm: #fdece8; /* Quiet warm field for graphics, slides and social posts: a panel behind a profile or a quote. Never behind body text on the website. */
  --tint-cool: #eaf1f8; /* Quiet cool field for graphics, slides and social posts, the counterpart to tint-warm. */
  --shadow-float: 0 8px 24px rgba(26,26,26,0.12), 0 1px 2px rgba(26,26,26,0.08); /* Only for things floating over the map: sheets, the climb card, map controls. Nothing on the page itself gets a shadow. */
}
[data-theme="dark"] {
  --paper: #100e0d;
  --surface: #191615;
  --sunken: #0b0908;
  --hairline: #312d2c;
  --line-strong: #6e6765;
  --muted: #aaa3a0;
  --ink: #f3efee;
  --red: #d7263d;
  --red-text: #f66c6d;
  --on-red: #ffffff;
  --blue: #3689dd;
  --blue-text: #70aff4;
  --focus: #70aff4;
  --classic-flat: #707070;
  --classic-black: #2b2b2b;
  --classic-purple: #9f50ca;
  --map-land: #191816;
  --map-water: #19232a;
  --map-road: #2e2e2c;
  --map-contour: #312d28;
  --chart-1: #d7263d;
  --chart-2: #3689dd;
  --chart-3: #36a980;
  --chart-4: #d0901e;
  --chart-5: #b464ae;
  --chart-6: #8594a4;
  --tint-warm: #261917;
  --tint-cool: #181e24;
  --shadow-float: 0 8px 24px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
}
:root {
  --space-1: 4px; /* Icon-to-label gaps. */
  --space-2: 8px; /* Tight groups, chip padding. */
  --space-3: 12px; /* List row padding. */
  --space-4: 16px; /* Default gap; minimum page gutter on phones. */
  --space-6: 24px; /* Gap between related blocks; sheet padding. */
  --space-8: 32px; /* Gutter on desktop. */
  --space-12: 48px; /* Between page sections. */
  --space-16: 64px; /* Above the climb name; major breaks. */
  --radius-sm: 6px; /* Chips, inputs, small controls. */
  --radius-md: 12px; /* Cards, popovers, the profile plate. */
  --radius-lg: 20px; /* Map sheets and modal sheets (top corners). */
  --radius-pill: 999px; /* Segmented controls, pill buttons, map markers. */
  --target-min: 44px; /* Minimum touch target for any control (Apple HIG). */
  --measure: 68ch; /* Max width of running text. */
  --content-max: 1120px; /* Max width of page content. */
  --profile-height: 320px; /* Hero profile height on desktop; 220px on phones. */
  --font-display: Outfit, "Avenir Next", Avenir, "Century Gothic", Futura, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", Menlo, monospace;
  --text-large-title: 700 40px/44px var(--font-display); /* Climb name on the climb page; page titles. */
  --text-title-1: 700 28px/34px var(--font-display); /* Section titles. */
  --text-title-2: 600 22px/28px var(--font-display); /* Card and sheet titles. */
  --text-stat: 600 32px/36px var(--font-display); /* Big numbers in the stat row. Tabular figures. */
  --text-headline: 600 17px/24px var(--font-text); /* Emphasised lines, list item titles. */
  --text-body: 400 17px/27px var(--font-text); /* Running text. Max 68 characters per line. */
  --text-callout: 400 15px/22px var(--font-text); /* Secondary paragraphs, table cells, sheets on the map. */
  --text-footnote: 400 13px/18px var(--font-text); /* Provenance, attribution, captions. */
  --text-label: 500 11px/14px var(--font-mono); /* Small uppercase labels under stats and on chart axes. */
  --text-figure: 400 13px/18px var(--font-mono); /* Numbers in tables and chart readouts. */
}
.large-title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.title-1 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.title-2 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0;
}
.stat {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: 0;
}
.headline {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: 0;
}
.callout {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.footnote {
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.figure {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
}