/* ==========================================================================
   Raise Strength and Conditioning — brand design tokens
   Single source of truth (05-brand-deliverables.md §A1/§A2).
   Imported by the website; copied into signature/PDF builds.
   Palette sampled from 01-brand/logo/logo-transparent-cropped.png.
   Fonts: self-hosted WOFF2 in ./fonts/ (SIL OFL 1.1 — licences alongside).
   ========================================================================== */

:root {
  /* ----- Colour palette (sampled from the logo) ----- */
  --gold-deep:      #8D6731; /* bronze — borders, hover-darken, gold on white (5.1:1 on white, AA) */
  --gold-mid:       #B08F50; /* primary gold — CTAs, links, headings, icons (6.5:1 on --ink, AA) */
  --gold-highlight: #E9DA8C; /* champagne — gradient top-light, hover-brighten, fine rules (14:1 on near-black) */
  --ink:            #0A0A0A; /* near-black — primary background everywhere */
  --ink-raised:     #161616; /* cards / elevated surfaces on --ink (derived tint, not a sixth colour) */
  --neutral:        #BFB9AD; /* bone grey — body copy on dark (10.1:1) */
  --paper:          #F4F1E9; /* off-white — print/PDF light pages, large headings on dark (17.5:1) */

  /* ----- Metallic gradient (DISPLAY USE ONLY) -----
     Reproduces the logo's metal. Reserved for hero display headings and
     PDF cover titles. All UI-level gold is FLAT --gold-mid — gradients on
     small text kill legibility and look cheap. */
  --gradient-metal: linear-gradient(170deg, #E9DA8C 0%, #B08F50 45%, #8D6731 100%);

  /* ----- Typography ----- */
  --font-display: 'Big Shoulders', 'Arial Narrow', 'Impact', sans-serif;
  --font-body:    'Inter', Arial, Helvetica, sans-serif;

  /* Type scale: 12 / 14 / 16 / 20 / 28 / 40 / 64 */
  --text-xs:   0.75rem;  /* 12px — fine print, captions */
  --text-sm:   0.875rem; /* 14px — secondary UI, labels */
  --text-base: 1rem;     /* 16px — body copy */
  --text-lg:   1.25rem;  /* 20px — lead paragraphs, H4 */
  --text-xl:   1.75rem;  /* 28px — H3 / section subheads */
  --text-2xl:  2.5rem;   /* 40px — H2 / page headings */
  --text-3xl:  4rem;     /* 64px — H1 / hero display */

  /* Line heights: body 1.5; display tightens 1.05–1.15 */
  --leading-body:    1.5;
  --leading-display: 1.1;   /* default for display sizes */
  --leading-display-tight: 1.05; /* hero / largest settings */
  --leading-display-loose: 1.15; /* smaller display settings (H2/H3) */

  /* Display headings: always uppercase + tracked (0.06–0.12em) */
  --tracking-display: 0.08em;       /* default heading tracking */
  --tracking-display-wide: 0.12em;  /* hero / short labels */
  --tracking-display-tight: 0.06em; /* long headings at large sizes */

  /* ----- Spacing scale (4px base) ----- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-24: 6rem;    /* 96px */
  --space-32: 8rem;    /* 128px — section breathing room */
}

/* ==========================================================================
   @font-face — self-hosted, latin subset, WOFF2 only (no Google CDN
   call = faster + no consent banner needed). font-display: swap.
   ========================================================================== */

/* Big Shoulders (display) — formerly listed as "Big Shoulders Display" */
@font-face {
  font-family: 'Big Shoulders';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/big-shoulders-v4-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Big Shoulders';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/big-shoulders-v4-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Big Shoulders';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/big-shoulders-v4-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Big Shoulders';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/big-shoulders-v4-latin-800.woff2') format('woff2');
}

/* Inter (body / UI) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-v20-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-v20-latin-600.woff2') format('woff2');
}

/* ==========================================================================
   Base application of the tokens (minimal, opt-in helpers)
   ========================================================================== */

body {
  background: var(--ink);
  color: var(--neutral);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

h1, h2, h3,
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: var(--gold-mid); /* flat gold by default — never set paragraphs in gold */
}

h1 { font-size: var(--text-3xl); font-weight: 800; line-height: var(--leading-display-tight); }
h2 { font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-display-loose); }
h3 { font-size: var(--text-xl);  font-weight: 600; line-height: var(--leading-display-loose); }

/* Hero/display headings only — the metallic gradient text treatment */
.display-metal {
  background: var(--gradient-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-mid); /* fallback where background-clip:text is unsupported */
}

/* Stat blocks / tables: tabular numerals (Inter) */
.stat,
.tabular {
  font-variant-numeric: tabular-nums;
}