/* ============================================================
   Coach Simon Says – design tokens
   Extracted from the live site's authored styles (coachsimonsays.com,
   audited 2026-08-27). The site is the source design system;
   DESIGN_PRINCIPLES.md (Brand) governs; the v0.1 mock-up illustrates.

   Adopted at ticket 2 with the §5.2 styling decision: hand-written
   CSS in wwwroot/css/ consumes these tokens; _Layout.cshtml links
   this sheet on every page, before site.css. No build step (§0 #10).
   ============================================================ */

/* ============================================================
   THE THREE BRAND FACES, SELF-HOSTED (#312)
   ============================================================
   They came from fonts.googleapis.com on every page load until
   2026-10-13. Four reasons, and the first is the one that matters:

   1. A Google Fonts request sends every visitor's IP to Google, on
      every page load, from a page a CLIENT IS SIGNED INTO. This
      platform holds intake answers, videos and, since migration 020,
      sleep and eating scores – which CLAUDE.md section 6 already
      treats as "arguably special personal information". That is a
      POPIA question, and one #77's privacy notice would otherwise
      have to disclose.
   2. Nothing works offline, and the gym has patchy signal.
   3. A flash of fallback text on every cold load.
   4. It unblocks #313's two layout assertions, which were waiting on
      exactly this.

   AND IT IS SMALLER, WHICH IS THE PART THAT SURPRISES. Nine files and
   247 KB became five files and 101 KB. `_Layout.cshtml` asked for
   `Montserrat:wght@400;500;600;700;800`, and asking for DISCRETE
   weights is what made Google send five separate files; asked as a
   range it is ONE VARIABLE FILE covering all five. Self-hosting
   removed about 146 KB and four requests rather than adding any.

   THE UNICODE-RANGE IS GOOGLE'S OWN, copied from the stylesheet they
   generated rather than typed, so a glyph outside the latin subset
   falls back exactly as it did before.

   font-display: swap is KEPT. It is why text is readable before the
   font arrives, and that mattered more when the font came from
   another origin – but a cold cache is still a cold cache.

   LICENCE: all three faces are SIL Open Font License 1.1 and the
   licence text travels with them in wwwroot/fonts/OFL.txt.
   Redistribution is fine; shipping it without the licence is not.
   ============================================================ */

@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/michroma-400.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;
}

/* ONE FILE, FIVE WEIGHTS. The `400 800` descriptor is what makes a
   variable font serve 400, 500, 600, 700 and 800 from one download. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/montserrat-variable.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;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.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;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500.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;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600.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;
}

:root {
  /* ---- colour: the accent – the only colour with a voice ---- */
  --accent: #BF5700;        /* burnt orange */
  --accent-hover: #9C4700;

  /* ---- colour: dark surfaces (the app is dark-first) ---- */
  --ink: #101114;           /* page background */
  --ink-soft: #1A1B1F;      /* panels and cards on dark */
  --line-dark: #2A2B30;     /* borders on dark */

  /* ---- colour: text on dark ---- */
  --text-heading: #FFFFFF;
  --text-body: #C9CBD0;     /* #D0D2D7 also in use on the site – treat as equal */
  --text-muted: #9EA1A8;    /* #ABAEB5 as the lighter muted step */

  /* ---- colour: light surfaces (site sections; app use tbc) ---- */
  --paper: #F5F5F3;         /* chalk */
  --white: #FFFFFF;
  --line-light: #E2E2DE;
  --text-on-light: #101114; /* ink */
  --text-on-light-2: #4A4C52;
  --steel: #7C7F85;         /* engraved labels */

  /* ---- app extension, not from the site: celebrate/PB green.
          Mock-up value – [TO CONFIRM] before first styled use.
          In first styled use as of the reskin (issue #73): it carries the
          "Reviewed and approved by Simon" stamp and the `celebrate` severity.
          Still Simon's to confirm – it is the one brand value the site audit
          could not settle, because the site has no equivalent. ---- */
  --good: #7A9E6E;

  /* ---- app extension: accent tint for chip and pill backgrounds. A
          transparency of --accent, not a new colour – it sits over both
          --ink and --ink-soft without a second opaque value to maintain ---- */
  --accent-soft: rgba(191, 87, 0, .14);

  /* ---- app extension: a third dark step, for a raised row INSIDE a card
          (a set row, a quoted note). --ink-soft is the card itself, so a
          panel drawn on a card needs one step further from --ink or it
          disappears. From the v0.3 mock-up, whose palette matches this
          sheet – it is the one surface value the site audit had no
          equivalent for, because the site has no card-within-card ---- */
  --ink-raised: #212227;

  /* ---- app extension: the DEV banner amber (CLAUDE.md §7). A greenfield-guide
          requirement, deliberately NOT a brand colour – it must read as a
          warning that does not belong to the palette ---- */
  --warn: #FFC107;
  --warn-ink: #101114;

  /* ---- typography ---- */
  --disp: 'Michroma', sans-serif;      /* single 400 weight; uppercase, letter-spaced */
  --body: 'Montserrat', sans-serif;    /* site loads 300–800 */
  --mono: 'IBM Plex Mono', monospace;  /* data, kickers, labels; 400–600 */

  /* type scale – site values */
  --fs-base: 16px;          /* body, line-height 1.6 */
  --fs-h1: clamp(2rem, 5.4vw, 3.9rem);
  --fs-h2: clamp(1.5rem, 3.4vw, 2.4rem);
  --fs-h3: 1rem;            /* .92–1rem on the site, uppercase */
  --fs-kicker: .75rem;      /* .7–.8rem band: kickers, labels, buttons */
  --fs-small: .9rem;        /* .88–.98rem band: card and list copy */
  --lh-heading: 1.18;
  --ls-heading: .02em;
  --ls-kicker: .14em;       /* site uses .1–.34em by prominence */

  /* ---- spacing rhythm ---- */
  --section-y: 96px;        /* 72px under 900px */
  --wrap-max: 1140px;
  --wrap-pad: 24px;
  --card-pad: 34px 30px;    /* 30–44px band on the site */
  --grid-gap: 20px;

  /* ---- app extension: the narrow ends of the rhythm. The app is
          MOBILE-FIRST (a departure from the site – DESIGN_PRINCIPLES.md
          Brand), so these are the BASE values in site.css and the site
          values above are what it widens to at 900px ---- */
  --section-y-narrow: 40px;
  --card-pad-narrow: 16px 14px;

  /* ---- app extension: the step scale behind the spacing utilities.
          Bootstrap's 1–4 ratios, kept so existing markup reads the same
          after the framework is gone (issue #73) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;

  /* ---- treatments ---- */
  --radius: 0;              /* square corners everywhere – the site ships zero border-radius */
  --border: 1px solid var(--line-dark);
}

/* ------------------------------------------------------------
   Reference treatments (site-authored, recorded for the first
   styled screens – not active rules):

   Buttons – accent background, white text, Montserrat 700,
   .8rem, letter-spacing .1em, uppercase, padding 13px 26px,
   square; hover darkens to --accent-hover and lifts 1px.
   Ghost variant: transparent, 1px border, no fill on hover.

   Cards – flat 1px border, no shadow, no radius; dark cards
   are --ink-soft on --line-dark; hover shifts border colour
   only. Dashed border marks "coming soon".

   Focus – 2px solid --accent outline, offset 2–3px.

   Breakpoints – desktop-first: @media (max-width: 900px)
   collapses grids and switches to the burger nav, section
   padding drops to 72px; @media (max-width: 560px) goes
   single-column and tightens panel padding. Honour
   prefers-reduced-motion by disabling transitions/animations.
   ------------------------------------------------------------ */