/* Camaniko Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --off-white: #f5f3ed; /* Page and content background. Matte 75 body text reads on it at 13.5:1. */
  --matte-75: #1a2a22; /* Body text on off-white (13.5:1), light mint (8.3:1), sage (5.7:1) and dark cream (about 8.5:1). Also the deepest surfaces: footers and section dividers. */
  --photo-teal: #274039; /* Deep surfaces (heroes, nav, dark slides) and primary button fills. Warm cream text on it reads at 8.1:1. Separate it from matte-75 with space or a rule (1.3:1 edge). */
  --warm-cream: #e1dbcb; /* Text on photo-teal (8.1:1) and matte-75; secondary background. Never as text on sage (1.9:1) or deep-forest (3.7:1, large text only). */
  --soft-mint: #b8c4bb; /* Light mint: feature panels with matte-75 text (8.3:1), borders and dividers on light surfaces. */
  --sage: #8fa496; /* Primary brand mid-tone: accent fills, badges with matte-75 text (5.7:1), branded bullets, decoration. Not a text colour on light surfaces (about 2.4:1). Cream on sage fails at every size; logo only. */
  --deep-forest: #597367; /* Links, eyebrows, hover and emphasis on off-white and white (about 4.7:1). Fails on light mint (about 2.9:1) and photo-teal (2.2:1). */
  --warm-gold: #d2c2a0; /* Dark cream accent, one or two per view: gold CTA with matte-75 text, key metrics, accent rules, focus ring on photo-teal and matte-75 surfaces. Nearly disappears on light pages. */
  --sage-50: #eef2ee; /* Tonal extension: lightest sage wash for quiet UI surfaces. */
  --sage-100: #d9e1db; /* Tonal extension: light sage surface; matte-75 text on it. */
  --sage-200: var(--soft-mint); /* Tonal extension: same value as soft-mint. */
  --sage-300: #97ad9d; /* Tonal extension: decorative mid sage. */
  --sage-400: var(--sage); /* Tonal extension: same value as sage. */
  --sage-500: #768c7c; /* Tonal extension: decorative darker sage. */
  --sage-600: var(--deep-forest); /* Tonal extension: same value as deep-forest. */
  --sage-700: #3e594f; /* Tonal extension: pressed state on deep-forest controls. */
  --sage-800: var(--photo-teal); /* Tonal extension: same value as photo-teal. */
  --sage-900: var(--matte-75); /* Tonal extension: same value as matte-75. */
  --gold-100: #efe9da; /* Pale dark-cream wash: placeholder highlights and quiet accent fills, matte-75 text on it. */
  --gold-200: #e3d8bf; /* Light dark-cream step for accent backgrounds. */
  --gold-300: var(--warm-gold); /* Same value as warm-gold. */
  --gold-400: #bdab83; /* Hover and press on warm-gold fills. */
  --success: #597367; /* Success status on light surfaces; pair with a word or icon. */
  --warning: #a98a52; /* Warning status; pair with a word or icon. Check contrast before using as small text. */
  --danger: #a25549; /* Error status and error help text on white and off-white; pair with a word or icon. */
  --info: #6b8090; /* Informational status; pair with a word or icon. */
  --bg-page: var(--off-white); /* Semantic: page background. */
  --bg-surface: #ffffff; /* Semantic: cards, inputs and raised content on the page. */
  --bg-raised: var(--off-white); /* Semantic: raised surface on white. */
  --bg-feature: var(--soft-mint); /* Semantic: feature panels, pull quotes, callouts, with matte-75 text. */
  --bg-feature-sage: var(--sage); /* Semantic: legacy solid-sage fill. Matte-75 text only. */
  --bg-deep: var(--photo-teal); /* Semantic: deep surfaces with warm-cream text. */
  --bg-deepest: var(--matte-75); /* Semantic: footers and section dividers with warm-cream text. */
  --fg-1: var(--matte-75); /* Semantic: body text on bg-page, bg-surface and bg-feature. */
  --fg-2: #5b6660; /* Semantic: muted text on bg-page and bg-surface (about 5.4:1). */
  --fg-3: #8a9590; /* Semantic: tertiary grey, about 2.8:1 on off-white. Decoration, placeholders and disabled states only; never text that must be read. */
  --fg-on-sage: var(--matte-75); /* Semantic: text on sage fills (5.7:1). */
  --fg-on-feature: var(--matte-75); /* Semantic: text on bg-feature (8.3:1). */
  --fg-on-deep: var(--warm-cream); /* Semantic: text on bg-deep and bg-deepest. */
  --fg-accent: var(--warm-gold); /* Semantic: accent text on bg-deep only (6.4:1). */
  --border: var(--soft-mint); /* Semantic: 1px borders and dividers on light surfaces. */
  --border-strong: #94a899; /* Semantic: stronger borders, dashed placeholder outlines. */
  --divider: rgba(89, 115, 103, 0.18); /* Semantic: hairline dividers on light surfaces. */
  --shadow-1: 0 1px 2px rgba(45, 60, 50, 0.06); /* Subtle lift. */
  --shadow-2: 0 4px 12px rgba(45, 60, 50, 0.08); /* Cards (never with a border). */
  --shadow-3: 0 12px 32px rgba(45, 60, 50, 0.10); /* Raised popovers; card hover. */
  --shadow-inset: inset 0 0 0 1px rgba(89, 115, 103, 0.12); /* Hairline in place of a shadow on flat cards. */
}
:root {
  --space-1: 4px; /* Hairline gaps, icon to label. */
  --space-2: 8px; /* Tight gaps inside controls. */
  --space-3: 12px; /* Compact stacks. */
  --space-4: 16px; /* Default gap between related items. */
  --space-5: 24px; /* Card padding minimum; gutters. */
  --space-6: 32px; /* Gaps between groups. */
  --space-7: 48px; /* Section padding, smallest. */
  --space-8: 64px; /* Section padding. */
  --space-9: 96px; /* Section padding, generous. */
  --space-10: 128px; /* Hero padding. */
  --radius-xs: 2px; /* Hairline details. */
  --radius-s: 4px; /* Buttons. */
  --radius-m: 8px; /* Inputs. */
  --radius-l: 12px; /* Cards. */
  --radius-xl: 16px; /* Large surfaces. */
  --radius-pill: 999px; /* Pills and badges. */
  --font-display: "Anton", "Bebas Neue", "Impact", sans-serif;
  --font-body: "Inter", "Source Sans Pro", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-display-xl: 400 72px/1.15 var(--font-display); /* Hero headlines in Anton, usually lowercase. */
  --text-display-l: 400 56px/1.15 var(--font-display); /* Large display headlines. */
  --text-display-m: 400 48px/1.15 var(--font-display); /* Section display headlines. */
  --text-h1: 400 48px/1.15 var(--font-display); /* Page titles in Anton. */
  --text-h2: 400 36px/1.15 var(--font-display); /* Section titles in Anton. */
  --text-h3: 600 24px/1.35 var(--font-body); /* Sub-headings in Inter semibold. */
  --text-h4: 600 20px/1.35 var(--font-body); /* Minor headings in Inter semibold. */
  --text-body-l: 400 18px/1.55 var(--font-body); /* Lead paragraphs. */
  --text-body: 400 16px/1.55 var(--font-body); /* Body copy, matte-75 on off-white. */
  --text-caption: 400 14px/1.45 var(--font-body); /* Captions and secondary text, fg-2. */
  --text-eyebrow: 600 12px/1.2 var(--font-body); /* Uppercase labels above section titles, deep-forest on light surfaces. */
  --text-doc-cover: 300 62px/1.15 var(--font-body); /* Document cover titles in Inter Light. */
  --text-doc-number: 300 72px/1 var(--font-body); /* Big section numbers (01, 02) in Inter Light. */
  --text-doc-h2: 400 36px/1.2 var(--font-body); /* Document section titles. */
  --text-doc-h3: 500 20px/1.3 var(--font-body); /* Document sub-sections. */
}
.display-xl {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.display-l {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.display-m {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.h1 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.h2 {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.h3 {
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.h4 {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
}
.body-l {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.doc-cover {
  font-family: var(--font-body);
  font-size: 62px;
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.doc-number {
  font-family: var(--font-body);
  font-size: 72px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.doc-h2 {
  font-family: var(--font-body);
  font-size: 36px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.doc-h3 {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.005em;
}