/* ============================================================
   styles.css — shared design system for the whole site.
   Self-hosted @font-face, brand colour tokens, the universal
   reset, the <html> rule, .muted. Every page links this and
   keeps only its own page-specific rules in its <style> block.
   bmr-calculator.html and before-we-talk/ additionally keep a
   small scoped :root for tokens unique to those pages (and their
   own embedded fonts).
   ============================================================ */

/* ---- FONTS — self-hosted, no Google Fonts. Files live in /fonts.
   woff2 first; the .otf kept as a fallback. Evogria.otf is a
   TrueType-flavoured file, so it must be format('truetype'). ---- */
@font-face {
  font-family: 'Evogria';
  src: url('fonts/Evogria.woff2') format('woff2'),
       url('fonts/Evogria.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('fonts/Proxima_Nova_Font.woff2') format('woff2'),
       url('fonts/Proxima_Nova_Font.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---- BRAND — accent colour split by job:
   --brand-fill  deep magenta  #be097f  — fills: button backgrounds, gradients,
                 section rules, borders, coloured blocks. White text on these passes.
   --brand-ink   bright magenta #e61364 — magenta TEXT and thin marks on dark
                 backgrounds: kickers, eyebrows, small labels, links, headline
                 accent words on black/dark panels. (On the light .paper /
                 .section-light sections, magenta text stays --brand-fill.)
   --magenta / --solid are kept as aliases so existing usages don't churn. ---- */
:root {
  --brand-fill: #be097f;
  --brand-ink:  #e61364;
  --magenta:    var(--brand-fill);   /* alias — fills */
  --magenta-lt: #cf3f97;   /* hover — tighter tint of --brand-fill (was #d94d9c) */
  --purple:     #762373;   /* secondary */
  --solid:      var(--brand-ink);    /* alias — ink / tertiary */
  --black:      #0d0d0d;
  --off-black:  #141414;
  --dark:       #1c1c1c;
  --steel:      #333333;
  --muted:      #8f8f8f;
  --light:      #c6c6c6;
  --white:      #ffffff;
  --paper:      #f6f4f1;

  /* pillar colours - used only where a section is about that pillar */
  --fitness:    #e52332;
  --mindset:    #009be0;   /* the only place blue is allowed */
  --nutrition:  #009a9a;
  --life:       #fab400;

  --evogria: 'Evogria', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --body: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --grad: linear-gradient(135deg, var(--brand-fill) 0%, var(--purple) 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

.muted { color: var(--muted); }
