/* ==========================================================================
   Bellrock Design System — Colors & Type
   Source of truth: ETO-MRC-STD-007_Bellrock_Brand_Good_To_Know.pdf
   --------------------------------------------------------------------------
   Bellrock palette is built on three character pillars:
     • Bold     – impactful core greens (Pine / Lichen / Fir)
     • Dynamic  – expressive accents (Coral, Rusty, Beacon, Amber, etc.)
     • Natural  – sustainable neutrals (Sand, Clay, Pebble, Ecru)
   Typography is TT Hoves (Demi Bold / Medium / Light / Regular). System
   fallback is Arial. We substitute Manrope from Google Fonts — flag this.
   ========================================================================== */

/* ---------- Typeface --------------------------------------------------------
   Per Bellrock brand guide, Arial is the documented system fallback for TT
   Hoves. We use Arial directly — no webfont download. Drop TT Hoves files
   into fonts/ and add @font-face rules later if you want to swap back. */

:root {
  /* =====================================================================
     COLOUR — Primary (Bold)
     ===================================================================== */
  --pine:    #0A5C54; /* Core brand green */
  --lichen:  #94D798; /* Bright accent green */
  --fir:     #183131; /* Deep forest – often used as ink/dark surface */

  /* Pine scale (dark → light) */
  --pine-900: #042521;
  --pine-800: #053732;
  --pine-700: #0A5C54; /* = pine */
  --pine-600: #0D8175;
  --pine-500: #12A597;

  /* Fir scale */
  --fir-900: #0E1B1B;
  --fir-800: #142928;
  --fir-700: #183131; /* = fir */
  --fir-600: #244343;
  --fir-500: #295152;

  /* Lichen scale */
  --lichen-700: #42B34A;
  --lichen-600: #6AC870;
  --lichen-500: #94D798; /* = lichen */
  --lichen-400: #B5E3B8;
  --lichen-300: #D2EED4;

  /* =====================================================================
     COLOUR — Accents (Dynamic)
     ===================================================================== */
  --coral:    #FE6F5B;
  --rusty:    #CB485A;
  --beacon:   #F9D74D;
  --amber:    #FFAD5C;
  --foxglove: #7B70C3;
  --moss:     #8FB67B;
  --laurel:   #2C5F34;
  --astro:    #BEA5E6;
  --space:    #37355A;
  --rose:     #B0306C;

  /* Coral scale */
  --coral-900: #A21401;
  --coral-800: #F41D01;
  --coral-700: #FE4C34;
  --coral-600: #FE6F5B; /* = coral */
  --coral-500: #FE9385;
  --coral-400: #FFC9C2;
  --coral-300: #FFDBD6;

  /* Rusty scale */
  --rusty-900: #6C2328;
  --rusty-800: #8F2F36;
  --rusty-700: #BF3648;
  --rusty-600: #CB485A; /* = rusty */
  --rusty-500: #D7707E;
  --rusty-400: #E4A0A9;
  --rusty-300: #F2CFD4;

  /* Beacon scale */
  --beacon-900: #B18F06;
  --beacon-800: #D9AF08;
  --beacon-700: #F7CD26;
  --beacon-600: #F9D74D; /* = beacon */
  --beacon-500: #FBE489;
  --beacon-400: #FDF1C4;
  --beacon-300: #FEF5D8;

  /* Amber scale */
  --amber-900: #B85C00;
  --amber-800: #F57A00;
  --amber-700: #FF9933;
  --amber-600: #FFAD5C; /* = amber */
  --amber-500: #FFC285;
  --amber-400: #FFE0C2;
  --amber-300: #FFEBD6;

  /* Foxglove scale */
  --foxglove-900: #282456;
  --foxglove-800: #3C3681;
  --foxglove-700: #5F53B0;
  --foxglove-600: #7B70C3; /* = foxglove */
  --foxglove-500: #9994D5;
  --foxglove-400: #C4C0EB;
  --foxglove-300: #E2E0F5;

  /* Moss scale (Concerto theme) */
  --moss-900: #1B2815;
  --moss-800: #405C33;
  --moss-700: #659150;
  --moss-600: #8FB67B; /* = moss */
  --moss-500: #B1CCA3;
  --moss-400: #D2E2CA;
  --moss-300: #E9F1E5;

  /* Laurel scale (Green Mark theme) */
  --laurel-900: #042508;
  --laurel-800: #04300B;
  --laurel-700: #114D1A;
  --laurel-600: #2C5F34; /* = laurel */
  --laurel-500: #3D7E48;
  --laurel-400: #83B389;
  --laurel-300: #B3D0B7;

  /* Astro scale */
  --astro-900: #502790;
  --astro-800: #8B5FD3;
  --astro-700: #AE8FE0;
  --astro-600: #BEA5E6; /* = astro */
  --astro-500: #DCCFF2;
  --astro-400: #E8DFF6;
  --astro-300: #F3EFFB;

  /* Space scale (Mobiess theme) */
  --space-900: #08080D;
  --space-800: #171727;
  --space-700: #272640;
  --space-600: #37355A; /* = space */
  --space-500: #474474;
  --space-400: #5F5B9A;
  --space-300: #BFBFD9;

  /* Rose scale */
  --rose-900: #310C1E;
  --rose-800: #601A3B;
  --rose-700: #902758;
  --rose-600: #B0306C; /* = rose */
  --rose-500: #CF4F8B;
  --rose-400: #E08FB5;
  --rose-300: #FBF3F7;

  /* =====================================================================
     COLOUR — Neutrals (Natural)
     ===================================================================== */
  --sand:   #DCD1BD;
  --clay:   #B4B1B1;
  --pebble: #D6D7D0;
  --ecru:   #EEEBE3;
  --white:  #FFFCF9; /* Bellrock "warm white" */

  /* Black & White scale (typography greys) */
  --black:    #111111;
  --grey-700: #2D2D2D;
  --grey-600: #565656;
  --grey-500: #757575;
  --grey-400: #A8A8A8;
  --grey-300: #D6D6D6;
  --grey-200: #F4F5F5;
  --pure-white: #FFFFFF;

  /* =====================================================================
     COLOUR — Highlights & Alerts
     ===================================================================== */
  --error:   #A91734;
  --warning: #191E20; /* per brand guide; pair with amber bg in UI */
  --success: #3FCA8C;

  /* =====================================================================
     SEMANTIC TOKENS — surface, ink, line
     ===================================================================== */
  --bg:        var(--white);          /* page background */
  --bg-alt:    var(--ecru);           /* warm card / section */
  --bg-inset:  var(--grey-200);       /* table rows, inputs */
  --bg-dark:   var(--fir);            /* inverted hero / footer */

  --ink-1: var(--black);              /* headlines */
  --ink-2: var(--grey-700);           /* body */
  --ink-3: var(--grey-500);           /* secondary / captions */
  --ink-4: var(--grey-400);           /* disabled / placeholder */
  --ink-on-dark: var(--white);

  --line-1: var(--grey-300);          /* default border */
  --line-2: var(--grey-200);          /* subtle divider */
  --line-strong: var(--fir);

  --brand:        var(--pine);
  --brand-ink:    var(--white);
  --brand-soft:   var(--moss-300);    /* tinted container */
  --brand-accent: var(--lichen);

  /* Focus ring – pine at 35% over warm white */
  --focus-ring: 0 0 0 3px rgba(10, 92, 84, 0.35);

  /* =====================================================================
     RADII, SHADOWS, MOTION, SPACING
     ===================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(24, 49, 49, 0.06);
  --shadow-sm: 0 2px 8px rgba(24, 49, 49, 0.06), 0 1px 2px rgba(24, 49, 49, 0.04);
  --shadow-md: 0 8px 24px rgba(24, 49, 49, 0.08), 0 2px 4px rgba(24, 49, 49, 0.04);
  --shadow-lg: 0 24px 48px rgba(24, 49, 49, 0.12), 0 4px 8px rgba(24, 49, 49, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--line-1);

  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasised: cubic-bezier(0.4, 0, 0.1, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 360ms;

  /* 4-pt spacing scale */
  --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;

  /* =====================================================================
     TYPOGRAPHY — base
     -1% to -2% letter-spacing per brand. Line-height = font-size + ~10%.
     ===================================================================== */
  --font-sans: Arial, "TT Hoves", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Display / heading sizes */
  --fs-display: 88px;   --lh-display: 96px;
  --fs-h1: 64px;        --lh-h1: 72px;
  --fs-h2: 48px;        --lh-h2: 56px;
  --fs-h3: 32px;        --lh-h3: 40px;
  --fs-h4: 24px;        --lh-h4: 32px;
  --fs-h5: 20px;        --lh-h5: 28px;
  --fs-body-lg: 18px;   --lh-body-lg: 28px;
  --fs-body:    16px;   --lh-body:    24px;
  --fs-body-sm: 14px;   --lh-body-sm: 20px;
  --fs-caption: 12px;   --lh-caption: 16px;

  --tracking-tight: -0.02em; /* headings: -2% */
  --tracking-near:  -0.01em; /* body & UI: -1% */
  --tracking-stat:  0;       /* statistics */
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================= */

html, body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-near);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-weight: 500;     /* TT Hoves Medium per brand */
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4) 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); }

p { margin: 0 0 var(--space-4) 0; text-wrap: pretty; }

small, .caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-3);
  letter-spacing: var(--tracking-near);
}

.eyebrow {
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--pine);
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-1);
}

.signpost { /* large lower-case nav-style links */
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink-1);
  letter-spacing: var(--tracking-near);
}

.attribution { /* signature lines, by-lines */
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink-3);
}

.statistic {
  font-size: 56px;
  line-height: 64px;
  font-weight: 500;
  letter-spacing: var(--tracking-stat);
  color: var(--pine);
}

a {
  color: var(--pine-600);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-2) var(--ease-standard);
}
a:hover { color: var(--pine-800); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection { background: var(--lichen-400); color: var(--fir); }