/*
  THEME: the only file to edit for colours and fonts.
  Source: Michael's brand guide ("1. The MHP Pros - Brand Guide", Drive brand kit folder,
  read 16 Oct 2026) and themhppros.com: near-black background, one bright green (#20E393),
  Geist Sans, white headlines fading to #BBBBBB with one emphasis word in italic.

  One deliberate change from the guide: button text is near-black, not white.
  White on #20E393 is 1.8:1 (fails WCAG); near-black on the green gradient is 9:1+.
  To go back to white text, set --btn-ink: #FFFFFF and --btn-b: #127D51.
*/
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&display=swap");

:root {
  /* Brand (website and software look, the guide's "primary look") */
  --green: #20E393;         /* buttons, highlights, key numbers (on dark) */
  --green-dark: #127D51;    /* guide: end of the button gradient */
  --green-deep: #0D281D;    /* subtle panels and glows */
  --green-ink: #0A7A4A;     /* green text on LIGHT sections (5.3:1 on white) */
  --btn-a: #2BEA9C;         /* button gradient start */
  --btn-b: #16B874;         /* button gradient end (lighter than the guide so dark text stays AA) */
  --btn-ink: #03130B;       /* button text */

  /* Surfaces */
  --bg: #050505;            /* page background (guide) */
  --panel: #0B0D0C;         /* cards and sections on dark (guide: #0A0A0A / #0D0D0D) */
  --panel-2: #101413;
  --line-dark: #1D2422;
  --white: #FFFFFF;
  --grey: #BBBBBB;          /* headline gradient end, secondary text (guide) */
  --fine: #DFE1E6;          /* fine detail (guide) */
  --on-dark: #E7EBE9;       /* body text on dark */
  --on-dark-muted: #A3ADA8; /* secondary text on dark (8:1) */
  --paper: #F4F6F5;         /* light reading sections */
  --ink: #0A100D;           /* text on light */
  --ink-muted: #4A5550;     /* secondary text on light (7:1) */
  --line: #DCE2DF;

  /* States */
  --red: #E5484D;
  --red-ink: #B42318;
  --red-soft: #FDE8E6;
  --green-soft: #E2F7EE;
  --gold: #F5B400;          /* stars only */
  --focus: #FFB020;

  /* Type */
  --font: "Geist", "Helvetica Neue", Arial, sans-serif;
  --w-body: 400;
  --w-head: 600;
  --w-bold: 700;

  /* Layout */
  --max: 1200px;
  --letter: 640px;
  --gutter: 16px;
  --radius: 16px;
}