/* =========================================================================
   Embla — Colour, type, and core tokens
   Palette B · Evergreen + Sage.  UK English throughout.

   Load Google Fonts in <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   ========================================================================= */

:root {
  /* ---------- Brand colours ---------- */
  --c-evergreen:        #1F3A2E;  /* Primary. Headings, brand surfaces, primary buttons. */
  --c-evergreen-800:    #16291F;  /* Hover / pressed for evergreen surfaces. */
  --c-evergreen-700:    #2A4A3C;
  --c-evergreen-500:    #4C6B5D;  /* Tertiary text on bone. */
  --c-evergreen-300:    #8FA59A;  /* Disabled / decorative on bone. */

  --c-bone:             #F6F2EA;  /* Page background — warm, paper-like. */
  --c-bone-warm:        #EFE9DC;  /* Slightly deeper bone for subtle banding. */
  --c-stone:            #E8E1D2;  /* Cards, soft surfaces, table rows. */
  --c-stone-deep:       #D7CEBB;  /* Borders, dividers on stone. */
  --c-warm-grey:        #6B665B;  /* Secondary text on bone. AA on bone. */
  --c-warm-grey-300:    #A8A39A;  /* Tertiary / metadata. */

  --c-sage:             #94AE8F;  /* Light accent — surfaces, soft fills. */
  --c-sage-deep:        #5E7458;  /* Accent on bone for text / icons (AA). */

  --c-white:            #FFFFFF;
  --c-black:            #0B1411;  /* Almost-black; never pure #000. */

  /* ---------- Semantic colours ---------- */
  --c-success:          #4A6B43;
  --c-success-bg:       #E3E8DC;
  --c-warning:          #C29440;
  --c-warning-bg:       #F4E9CF;
  --c-error:            #B0493A;
  --c-error-bg:         #F1DCD6;
  --c-info:             #3F6A7A;
  --c-info-bg:          #DCE7EB;

  /* ---------- Token aliases (use these in components) ---------- */
  --fg-1:               var(--c-evergreen);     /* Primary text */
  --fg-2:               var(--c-evergreen-500); /* Secondary text */
  --fg-3:               var(--c-warm-grey);     /* Tertiary text */
  --fg-muted:           var(--c-warm-grey-300); /* Metadata, placeholders */
  --fg-on-dark:         var(--c-bone);          /* Text on evergreen / dark */
  --fg-on-dark-2:       rgba(246,242,234,0.72); /* Secondary on evergreen */
  --fg-accent:          var(--c-sage-deep);     /* Accent text on bone */

  --bg-page:            var(--c-bone);
  --bg-page-warm:       var(--c-bone-warm);
  --bg-surface:         var(--c-white);
  --bg-soft:            var(--c-stone);
  --bg-soft-deep:       var(--c-stone-deep);
  --bg-dark:            var(--c-evergreen);
  --bg-dark-2:          var(--c-evergreen-800);

  --line-1:             rgba(31,58,46,0.12);    /* Hairline on bone */
  --line-2:             rgba(31,58,46,0.22);    /* Stronger rule */
  --line-on-dark:       rgba(246,242,234,0.18);

  /* ---------- Typography ---------- */
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* Weights */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */

  /* Type scale (modular, calm — for product UI + documents)
     Heading sizes assume the display serif; UI/body sizes assume Manrope. */
  --t-display-xl:   72px; /* @kind font */ /* hero / cover slides only */
  --t-display-l:    56px; /* @kind font */
  --t-display-m:    44px; /* @kind font */
  --t-h1:           36px; /* @kind font */
  --t-h2:           28px; /* @kind font */
  --t-h3:           22px; /* @kind font */
  --t-h4:           18px; /* @kind font */
  --t-body-l:       18px; /* @kind font */
  --t-body:         16px; /* @kind font */
  --t-body-s:       14px; /* @kind font */
  --t-caption:      13px; /* @kind font */
  --t-micro:        11px; /* @kind font */  /* Eyebrows, all-caps labels only */

  --lh-tight:       1.05; /* @kind font */
  --lh-snug:        1.2; /* @kind font */
  --lh-base:        1.55; /* @kind font */
  --lh-relaxed:     1.7; /* @kind font */

  --ls-display:    -0.01em; /* @kind font */
  --ls-tight:      -0.005em; /* @kind font */
  --ls-base:        0; /* @kind font */
  --ls-caps:        0.16em; /* @kind font */  /* All-caps eyebrows */

  /* ---------- Spacing (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Radii — small and considered, not bubbly. ---------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-pill: 999px;

  /* ---------- Borders & shadows ---------- */
  --border-thin:   1px solid var(--line-1); /* @kind other */
  --border-rule:   1px solid var(--line-2); /* @kind other */

  /* Shadows: soft, low, never blue-ish. Use sparingly. */
  --shadow-1: 0 1px 2px rgba(31,58,46,0.06), 0 1px 1px rgba(31,58,46,0.04);
  --shadow-2: 0 4px 14px rgba(31,58,46,0.08), 0 1px 2px rgba(31,58,46,0.05);
  --shadow-3: 0 12px 40px rgba(31,58,46,0.12), 0 2px 4px rgba(31,58,46,0.06);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */  /* gentle ease-out */
  --ease-emphasis: cubic-bezier(0.32, 0.72, 0.20, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    180ms; /* @kind other */
  --dur-slow:    320ms; /* @kind other */

  /* ---------- Layout ---------- */
  --content-narrow: 640px; /* @kind other */
  --content-base:   880px; /* @kind other */
  --content-wide:   1180px; /* @kind other */
  --content-app:    1320px; /* @kind other */
}

/* =========================================================================
   Base elements — opinionated defaults so tags Just Look Right.
   ========================================================================= */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-4);
  color: var(--fg-1);
  text-wrap: balance;
}
h1 { font-size: var(--t-display-l); line-height: 1.04; }
h2 { font-size: var(--t-h1); }
h3 { font-size: var(--t-h2); line-height: var(--lh-snug); }
h4 { font-size: var(--t-h3); line-height: var(--lh-snug); }

h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
}
h5 { font-size: var(--t-h4); }
h6 {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}

p {
  margin: 0 0 var(--s-4);
  max-width: 68ch;
  text-wrap: pretty;
}

a {
  color: var(--c-sage-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--c-evergreen); }

small, .caption { font-size: var(--t-caption); color: var(--fg-3); }
.eyebrow {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}

hr { border: none; border-top: var(--border-thin); margin: var(--s-8) 0; }

code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.93em; }

::selection { background: var(--c-sage); color: var(--c-evergreen); }

/* =========================================================================
   A handful of building-block classes used across the system.
   ========================================================================= */
.display-xl { font-family: var(--font-display); font-size: var(--t-display-xl); line-height: 1.02; letter-spacing: var(--ls-display); font-weight: 400; }
.display-l  { font-family: var(--font-display); font-size: var(--t-display-l);  line-height: 1.04; letter-spacing: var(--ls-display); font-weight: 400; }
.display-m  { font-family: var(--font-display); font-size: var(--t-display-m);  line-height: 1.08; letter-spacing: var(--ls-display); font-weight: 400; }
.italic     { font-style: italic; }

.text-evergreen { color: var(--c-evergreen); }
.text-sage      { color: var(--c-sage-deep); }
.text-muted     { color: var(--fg-3); }
.bg-bone        { background: var(--bg-page); }
.bg-stone       { background: var(--bg-soft); }
.bg-evergreen   { background: var(--bg-dark); color: var(--fg-on-dark); }
.bg-evergreen h1, .bg-evergreen h2, .bg-evergreen h3 { color: var(--fg-on-dark); }