/* GRIT web tokens. Mirrors brand-book §3 (color) and §4 (type).
   Canon is the brand book; this file is a copy for the site build.
   Hard rules: only these five colors. No red, orange, gold, green.
   No gradients as decoration, no shadows/glows/outlines on type or the mark. */

:root {
  /* Palette (§3) */
  --grit-iron:     #25282A; /* primary dark: text on light, dark surfaces, mark on light */
  --grit-ash:      #B2B4B2; /* primary light: text on dark, mark on dark */
  --grit-black:    #000000; /* neutral ground, not a brand color */
  --grit-white:    #FFFFFF; /* neutral ground, not a brand color */
  --grit-gunmetal: #4F758B; /* accent at ~10%: kickers, rules, chips, CTAs */
  --grit-ash-30:   #E8E8E8; /* working tint, tool surfaces and hairlines only */

  /* Type (§4) */
  --grit-font-display: 'Archivo Black', Archivo, 'Arial Black', sans-serif;
  --grit-font-body:    Archivo, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --grit-font-wide:    'Archivo Expanded Black', 'Archivo Black', 'Arial Black', sans-serif;

  /* Scale off 1x = 16px body */
  --grit-h1:      clamp(2.25rem, 6vw, 3.75rem); /* 2.4x at desktop, uppercase, lh 1.05 */
  --grit-h2:      clamp(1.5rem, 3vw, 2.0rem);   /* 1.3x, uppercase, lh 1.15 */
  --grit-kicker:  0.75rem;                       /* 0.75x, 700, +0.1em, uppercase */
  --grit-body:    1rem;                          /* 400, lh 1.55, sentence case */
  --grit-caption: 0.8rem;                        /* 400, lh 1.4 */

  --grit-lh-h1: 1.05;
  --grit-lh-h2: 1.15;
  --grit-lh-body: 1.55;
  --grit-lh-caption: 1.4;
  --grit-track-kicker: 0.1em;

  /* Layout */
  --grit-measure: 68ch;   /* max line length for body copy */
  --grit-page-max: 1120px;
  --grit-section-y: clamp(4rem, 10vw, 7.5rem);
  --grit-gutter: clamp(1.25rem, 5vw, 3rem);
}

/* Approved text pairs only (§3). Everything on this site uses one of:
   Iron on White 14.8 | White on Iron 14.8 | White on Black 21.0 | Ash on Black 10.1
   Ash on Iron 7.1 (the signature pair) | Gunmetal on White 4.9 | White on Gunmetal 4.9
   Large text / UI only: Gunmetal on Black 4.3
   NEVER as text: Ash on White 2.1 | White on Ash 2.1 | Gunmetal on Ash 2.4 | Iron on Black 1.4 */

/* Fonts: Google Fonts carries both families.
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700&family=Archivo+Black&display=swap" rel="stylesheet">
   Self-hosting instead: assets/fonts/ holds the pinned TTFs. Keep the OFL files with them.
   The variable file defaults to wght 600, so always set weight explicitly. */

body {
  background: var(--grit-white);
  color: var(--grit-iron);
  font-family: var(--grit-font-body);
  font-weight: 400;
  font-size: var(--grit-body);
  line-height: var(--grit-lh-body);
}

h1, h2, h3 {
  font-family: var(--grit-font-display);
  font-weight: 400;          /* Archivo Black is already the weight */
  text-transform: uppercase; /* display is always uppercase (§4) */
  letter-spacing: 0;         /* never negative-track display (§4) */
}

h1 { font-size: var(--grit-h1); line-height: var(--grit-lh-h1); }
h2 { font-size: var(--grit-h2); line-height: var(--grit-lh-h2); }

.grit-kicker {
  font-family: var(--grit-font-body);
  font-weight: 700;
  font-size: var(--grit-kicker);
  letter-spacing: var(--grit-track-kicker);
  text-transform: uppercase;
  color: var(--grit-gunmetal);
}

.grit-section--dark { background: var(--grit-iron); color: var(--grit-white); }
.grit-section--black { background: var(--grit-black); color: var(--grit-ash); }

.grit-cta {
  background: var(--grit-gunmetal);
  color: var(--grit-white);   /* 4.9, do not let a theme auto-darken this */
  font-family: var(--grit-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--grit-track-kicker);
  border: 0;
  border-radius: 2px;         /* square-ish, the mark is square. No pills. */
  padding: 0.9rem 1.6rem;
}

/* Tabular figures wherever numbers line up (§4) */
.grit-stat { font-variant-numeric: tabular-nums; }