/* ============================================================
   RACE FOR IMPACT — COLORS & TYPOGRAPHY
   ============================================================

   SOURCE OF TRUTH: "RACE FOR IMPACT BRAND GUIDELINES 0.0" (Aug 2025)
     § 2.0 / 2.1 / 2.2  — Colour palette & usage
     § 3.1 / 3.2 / 3.3  — Typography system

   HEADLINE WEIGHT
     Brutal Extra Bold (800). Confirmed by brand owner against the
     RACE_FOR_IMPACT_CURRENT_BRAND_IDENTITY.pdf. The "Brutal Black" label
     on § 3.2 of the earlier Guidelines 0.0 doc was a typo; the canonical
     face is Extra Bold.
   ============================================================ */

/* ----- FONTS -----
   Only the weights we actually ship — see public/fonts/. Brand spec lists
   more (Black 900, Medium 500, Light 300, Chakra Petch Medium/Italic);
   add them here if/when those font files land in the repo. */
@font-face {
  font-family: "Brutal Type";
  src: url("../fonts/BrutalType-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Brutal Type";
  src: url("../fonts/BrutalType-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Brutal Type";
  src: url("../fonts/BrutalType.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/ChakraPetch-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/ChakraPetch-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/ChakraPetch-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     BRAND COLOURS — § 2.0 / 2.1
     Four colours. That's it. Usage split: 40 / 20 / 20 / 20.
     ============================================================ */
  --rfi-black:       #000000;       /* 40% — dominant */
  --rfi-deep-blue:   #3759B6;       /* 20% — background fill */
  --rfi-pastel-blue: #97CEFF;       /* 20% — highlight / underline accent */
  --rfi-white:       #FFFFFF;       /* 20% — space */

  /* ============================================================
     EXTENSIONS — NOT IN BRAND SPEC
     ============================================================ */
  --rfi-ext-ink-700: #3D3C3C;  /* observed footer surface */
  --rfi-ext-ink-500: #828282;  /* observed placeholder / muted body */
  --rfi-ext-ink-300: #D9D9D9;  /* observed image load placeholder */

  /* ---------- SEMANTIC FG / BG ---------- */
  --rfi-bg:          var(--rfi-black);
  --rfi-bg-alt:      var(--rfi-white);
  --rfi-bg-accent:   var(--rfi-deep-blue);
  --rfi-bg-footer:   var(--rfi-ext-ink-700);

  --rfi-fg:          var(--rfi-white);
  --rfi-fg-on-light: var(--rfi-black);
  --rfi-fg-accent:   var(--rfi-pastel-blue);
  --rfi-fg-muted:    var(--rfi-ext-ink-500);

  --rfi-border:      var(--rfi-pastel-blue);
  --rfi-border-dark: var(--rfi-deep-blue);

  /* ============================================================
     TYPE — § 3.1 / 3.2 / 3.3
     ============================================================ */
  --rfi-font-display: "Brutal Type", "Arial Black", "Helvetica Neue", sans-serif;
  --rfi-font-ui:      "Chakra Petch", "Helvetica Neue", "Inter", system-ui, sans-serif;

  --rfi-display-weight: 800;

  --rfi-display-xl: var(--rfi-display-weight) 60px/50px var(--rfi-font-display);
  --rfi-display-lg: var(--rfi-display-weight) 54px/52px var(--rfi-font-display);
  --rfi-display-md: var(--rfi-display-weight) 44px/46px var(--rfi-font-display);
  --rfi-display-sm: var(--rfi-display-weight) 34px/36px var(--rfi-font-display);

  --rfi-sub-lg: 600 29px/0.95 var(--rfi-font-ui);
  --rfi-sub-md: 600 22px/1.0  var(--rfi-font-ui);
  --rfi-sub-sm: 600 18px/1.1  var(--rfi-font-ui);

  --rfi-body-lg: 400 26px/27px var(--rfi-font-ui);
  --rfi-body-md: 400 20px/22px var(--rfi-font-ui);
  --rfi-body-sm: 400 16px/1.1  var(--rfi-font-ui);
  --rfi-body-xs: 400 12px/1.1  var(--rfi-font-ui);

  --rfi-track-display: -0.07em;
  --rfi-track-sub:     -0.02em;
  --rfi-track-body:    normal;

  /* ============================================================
     SPACING / RADII / LAYOUT
     ============================================================ */
  --rfi-radius-none:  0px;
  --rfi-radius-pill:  9999px;

  --rfi-ext-radius-card:  24px;
  --rfi-ext-radius-chip:  30px;

  --rfi-space-1: 4px;
  --rfi-space-2: 8px;
  --rfi-space-3: 12px;
  --rfi-space-4: 16px;
  --rfi-space-5: 24px;
  --rfi-space-6: 32px;
  --rfi-space-7: 48px;
  --rfi-space-8: 64px;
  --rfi-space-9: 96px;

  --rfi-container: 1240px;
  --rfi-nav-h:     128px;

  --rfi-shadow-sm: 0 1px 2px rgba(0,0,0,0.12);
  --rfi-shadow-md: 0 4px 12px rgba(0,0,0,0.18);
  --rfi-shadow-lg: 0 16px 48px rgba(0,0,0,0.35);

  --rfi-ext-protect: linear-gradient(
    rgba(0,0,0,0) 0%,
    rgb(0,0,0) 47%
  );
}

/* ============================================================
   SEMANTIC DEFAULTS
   ============================================================ */

html, body {
  background: var(--rfi-bg);
  color: var(--rfi-fg);
  font: var(--rfi-body-md);
  letter-spacing: var(--rfi-track-body);
  -webkit-font-smoothing: antialiased;
}

h1, .rfi-h1 {
  font: var(--rfi-display-xl);
  letter-spacing: var(--rfi-track-display);
  text-transform: uppercase;
  margin: 0;
}
h2, .rfi-h2 {
  font: var(--rfi-display-lg);
  letter-spacing: var(--rfi-track-display);
  text-transform: uppercase;
  margin: 0;
}
h3, .rfi-h3 {
  font: var(--rfi-display-md);
  letter-spacing: var(--rfi-track-display);
  text-transform: uppercase;
  margin: 0;
}
h4, .rfi-sub {
  font: var(--rfi-sub-md);
  letter-spacing: var(--rfi-track-sub);
  text-transform: uppercase;
  margin: 0;
}
.rfi-eyebrow {
  font: 600 18px/0.95 var(--rfi-font-ui);
  letter-spacing: var(--rfi-track-sub);
  text-transform: uppercase;
}
p, .rfi-body {
  font: var(--rfi-body-md);
  letter-spacing: var(--rfi-track-body);
  margin: 0;
}
.rfi-body-sm { font: var(--rfi-body-sm); letter-spacing: var(--rfi-track-body); }
.rfi-caps    { text-transform: uppercase; }
.rfi-sentence{ text-transform: none; }

/* Horizontal rule used as headline underline */
.rfi-rule {
  display: block;
  width: 100%;
  height: 4px;
  background: var(--rfi-pastel-blue);
  border: none;
  margin: 18px 0;
}
.rfi-rule--blue { background: var(--rfi-deep-blue); }