/* ==========================================================================
   Nerchure — design tokens
   Source of truth: Claude Design project "Nerchure Design System"
   (55fd19ba-4a59-4e14-a706-77ad97b3002d), files tokens/colors.css,
   tokens/typography.css and tokens/spacing.css, concatenated here.

   Two deliberate deviations from upstream:
   1. The upstream typography.css pulls four families from the Google Fonts
      CDN via @import. That is removed — the fonts are self-hosted below, so
      no visitor IP is sent to a third party. See assets/fonts/OFL.txt.
   2. IBM Plex Mono is not bundled; this site uses no monospace type.

   Typefaces are licensed under the SIL Open Font License 1.1.
   Copyright notices and the full licence: assets/fonts/OFL.txt
   ========================================================================== */

/* --- self-hosted faces (latin + latin-ext subsets) ------------------------
   latin-ext files are only fetched when a character in that range appears,
   so English pages pay for the latin subset alone. */

/* Newsreader italic 400 500 — latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/newsreader-italic-400-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Newsreader italic 400 500 — latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/newsreader-italic-400-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Newsreader normal 400 500 — latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/newsreader-normal-400-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Newsreader normal 400 500 — latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/newsreader-normal-400-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Public Sans normal 400 600 — latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/public-sans-normal-400-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Public Sans normal 400 600 — latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/public-sans-normal-400-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Grotesk normal 600 — latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-normal-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk normal 600 — latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-normal-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- typography ---------------------------------------------------------- */
:root {
  --font-display: 'Newsreader', ui-serif, Georgia, serif;
  --font-sans: 'Public Sans', ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-ui: 'Space Grotesk', ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace; /* IBM Plex Mono not bundled — unused here */

  --text-display-xl: 4rem;
  --text-display-lg: 3.5rem;
  --text-display-md: 2.5rem;
  --text-display-sm: 1.875rem;
  --text-title-lg: 1.5rem;
  --text-title-md: 1.25rem;
  --text-title-sm: 1.0625rem;
  --text-body-lg: 1.125rem;
  --text-body-md: 1rem;
  --text-body-sm: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-mono: 0.9rem;

  --lh-display: 1.08;
  --lh-title: 1.25;
  --lh-body: 1.55;
  --lh-caption: 1.4;

  --tracking-display: -0.015em;
  --tracking-title: -0.01em;
  --tracking-eyebrow: 0.12em;
}

/* --- spacing, radius, shadow, motion ------------------------------------- */
:root {
  --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;
  --space-20: 80px; --space-24: 96px; --space-32: 128px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(7,40,10,0.06);
  --shadow-md: 0 4px 12px rgba(7,40,10,0.08);
  --shadow-lg: 0 12px 32px rgba(7,40,10,0.12);
  --shadow-focus: 0 0 0 3px rgba(73,155,82,0.35);

  --border-width: 1px;
  --container-max: 1200px;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* --- colour ---------------------------------------------------------------
   Generated in OKLCH, verified against WCAG 2.x. Ramp method: shared lightness
   ladder, chroma as a fraction of the sRGB gamut cusp, ~22 degrees of hue
   rotation across the green ramp. Do not hand-edit the hex values. */
:root {
  /* primitive: green (brand) */
  --green-50: #F0FBED;  --green-100: #DAF6D3; --green-200: #BBEDB1; --green-300: #97E18D;
  --green-400: #65D260; --green-500: #55B859; --green-600: #499B52; --green-700: #3F7D4A;
  --green-800: #376240; --green-900: #2E4D36; --green-950: #1E2D22;

  /* primitive: loam (earth). 50-300 only are legal as UI surfaces. */
  --loam-50: #FBF6EE; --loam-100: #F4ECDE; --loam-200: #E8DAC7; --loam-300: #D9C8AE;
  /* 400-700 are the no-go band: mid-lightness browns. Illustration and photography only. */
  --loam-400: #C9B28F; --loam-500: #B19B79; --loam-600: #92846F; --loam-700: #746C60;

  /* primitive: neutral (green-tinted, chroma 0.003-0.011) */
  --neutral-50: #F5F7F6;  --neutral-100: #EBEEEC; --neutral-200: #D9DDDB; --neutral-300: #C7CCC8;
  --neutral-400: #B1B8B3; --neutral-500: #99A09B; --neutral-600: #818883; --neutral-700: #696F6B;
  --neutral-800: #535854; --neutral-900: #424643; --neutral-950: #262A27;

  /* primitive: semantic hues */
  --success-surface: #EBF7F1; --success-border: #92E9C5; --success-fg: #196A4F;
  --success-solid: #207F60;   --success-fg-dark: #76D0AC; --success-dot: #196A4F;
  --warning-surface: #F7F3EE; --warning-border: #ECCFAC; --warning-fg: #7A5115;
  --warning-solid: #92621B;   --warning-fg-dark: #E4B06C; --warning-dot: #FCAA2C;
  --danger-surface: #F7F2F1;  --danger-border: #EDCBC7;  --danger-fg: #A61D1D;
  --danger-solid: #C62424;    --danger-fg-dark: #E7A9A1; --danger-dot: #FB5A50;
  --info-surface: #F1F4F7;    --info-border: #C6D5EC;    --info-fg: #1457B0;
  --info-solid: #1B68D2;      --info-fg-dark: #A1BCE6;   --info-dot: #126EE5;

  /* brand aliases */
  --forest: #07280A;  /* ink and dark sections */
  --sprout: #97E18D;  /* the living accent — DARK INK ONLY */
  --canopy: #3F7D4A;  /* interactive fill carrying white text */

  /* semantic roles: light theme */
  --bg-page: #FBF6EE;
  --bg-surface: #FFFFFF;
  --bg-subtle: #EBEEEC;
  --bg-brand-subtle: #F0FBED;
  --border-subtle: #D9DDDB;
  --border-default: #C7CCC8;
  --border-brand: #499B52;   /* 3.2:1 — legal for UI, illegal for text */
  --text-primary: #07280A;   /* 14.82:1 on bg-page */
  --text-secondary: #696F6B; /* 4.78:1 */
  --text-brand: #376240;     /* 6.54:1 */
  --text-on-brand: #FFFFFF;  /* on --canopy: 4.95:1 */
  --text-on-accent: #07280A; /* on --sprout: 10.23:1 */
  --action-primary: #3F7D4A;
  --action-primary-hover: #376240;
  --focus-ring: #499B52;

  /* dark theme surfaces (brand-hue tinted, delta-L 0.04) */
  --dark-surface-0: #0F110E; --dark-surface-1: #171A16; --dark-surface-2: #20241F;
  --dark-surface-3: #2A2E29; --dark-surface-4: #343832;
}

/* The design system ships a dark theme. This site is light-only — the design
   never opts in — but the tokens are carried through unchanged so the roles
   stay in sync with upstream if dark mode is ever switched on. */
[data-theme="dark"] {
  --bg-page: #0F110E;
  --bg-surface: #171A16;
  --bg-subtle: #20241F;
  --bg-brand-subtle: #18271B;
  --border-subtle: #2A2E29;
  --border-default: #343832;
  --border-brand: #435F44;
  --text-primary: #D9DDDB;  /* 12.81:1 — capped below 15:1 to avoid halation */
  --text-secondary: #B1B8B3;
  --text-brand: #89CD6C;    /* chroma cut to ~60% — see design system rules */
  --text-on-brand: #FFFFFF;
  --action-primary: #5FA868;
  --action-primary-hover: #74BC7C;
  --success-fg: #76D0AC;
  --warning-fg: #E4B06C;
  --danger-fg: #E7A9A1;
  --info-fg: #A1BCE6;
}