/* MUNACA — Facts are Facts, McGill
 * Foundational color & type tokens.
 *
 * Typeface: Neue Haas Grotesk Display (campaign spec — locally bundled in /fonts).
 */

/* ─── Neue Haas Grotesk Display — local @font-face ─────────────────── */
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayXXThin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayXXThinItalic.ttf") format("truetype");
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayXThin.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayXThinItalic.ttf") format("truetype");
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayThin.ttf") format("truetype");
  font-weight: 250; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayThinItalic.ttf") format("truetype");
  font-weight: 250; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayLight.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayLightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayRomanItalic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayMediu.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayMediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayBold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayBoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayBlack.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayBlackItalic.ttf") format("truetype");
  font-weight: 900; font-style: italic; font-display: swap;
}

/* Map "Text Pro" alias (used by var(--font-text)) to the same Display family */
@font-face {
  font-family: "Neue Haas Grotesk Text Pro";
  src: url("fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Text Pro";
  src: url("fonts/NeueHaasDisplayRomanItalic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Text Pro";
  src: url("fonts/NeueHaasDisplayMediu.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Text Pro";
  src: url("fonts/NeueHaasDisplayBold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Text Pro";
  src: url("fonts/NeueHaasDisplayLight.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}

:root {
  /* ─── Campaign palette ──────────────────────────────────────────── */
  /* Three saturated, flat campaign-poster backgrounds.
     One is "the brand" (green); the other two are tactical accents
     used to differentiate poster series and give the campaign rhythm. */
  --munaca-green:   #008037;  /* PRIMARY. The MUNACA dominant. */
  --munaca-yellow:  #E6C700;  /* Campaign accent — fact callouts, alarming numbers. */
  --munaca-teal:    #1AA9BC;  /* Campaign accent — secondary poster ground. */

  /* Tints / shades for UI surfaces (derived; not on posters but useful for kit) */
  --green-900:      #00471F;
  --green-700:      #006128;
  --green-500:      #008037;
  --green-300:      #4FA672;
  --green-100:      #C9E4D2;
  --green-050:      #EAF4EE;

  --yellow-700:     #B59D00;
  --yellow-500:     #E6C700;
  --yellow-300:     #F2DC4A;
  --yellow-100:     #FBF1B0;

  --teal-700:       #128494;
  --teal-500:       #1AA9BC;
  --teal-300:       #67C7D4;
  --teal-100:       #C6EAF0;

  /* Neutrals — Swiss high-contrast scale */
  --ink:            #0A0A0A;  /* near-black; body & headlines on light */
  --ink-soft:       #2B2B2B;
  --paper:          #FFFFFF;
  --paper-soft:     #F5F5F2;  /* very faint warm off-white */
  --rule:           #0A0A0A;  /* hairline rules use ink */
  --muted:          #6B6B6B;  /* footnotes / sources */

  /* Union seal red (PSAC/AFPC seals on lockups) */
  --psac-red:       #C8102E;

  /* McGill red — institutional adversary color.
     Used SPARINGLY to flag McGill in the abstract: charts where we're
     contrasted against the employer, "what McGill said" pull-quotes,
     opposition framing. NEVER as a campaign accent. */
  --mcgill-red:     #ED1B2F;

  /* ─── Foreground / background semantic tokens ───────────────────── */
  --fg-1:           var(--ink);          /* Primary text */
  --fg-2:           var(--ink-soft);     /* Secondary text */
  --fg-3:           var(--muted);        /* Tertiary / footnote */
  --fg-on-color:    var(--paper);        /* Text on saturated grounds */

  --bg-1:           var(--paper);
  --bg-2:           var(--paper-soft);
  --bg-brand:       var(--munaca-green);
  --bg-accent-y:    var(--munaca-yellow);
  --bg-accent-t:    var(--munaca-teal);

  /* ─── Type ──────────────────────────────────────────────────────── */
  --font-display:   "Neue Haas Grotesk Display Pro", "Inter Tight",
                    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:      "Neue Haas Grotesk Text Pro", "Inter Tight",
                    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:      ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights — campaign uses Bold (FR primary) + Light (EN secondary) */
  --w-light:        300;
  --w-regular:      400;
  --w-medium:       500;
  --w-bold:         700;
  --w-black:        900;

  /* Type scale — Swiss-poster oriented; large display sizes */
  --t-mega:         clamp(64px, 9vw, 160px); /* poster "MUNACA" / hero number */
  --t-display:      clamp(44px, 5.6vw, 88px);/* poster headline quote */
  --t-h1:           clamp(32px, 3.6vw, 56px);
  --t-h2:           clamp(24px, 2.4vw, 36px);
  --t-h3:           20px;
  --t-body:         16px;
  --t-small:        13px;
  --t-foot:         10px;                    /* poster footnote (sources) */

  /* Line heights */
  --lh-tight:       0.92;
  --lh-snug:        1.05;
  --lh-text:        1.35;
  --lh-prose:       1.5;

  /* Tracking — Swiss neogrotesque is set tight */
  --tr-tight:       -0.02em;
  --tr-snug:        -0.01em;
  --tr-normal:      0;
  --tr-caps:        0.04em;

  /* ─── Spacing / radii / rules ───────────────────────────────────── */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        24px;
  --space-6:        32px;
  --space-7:        48px;
  --space-8:        64px;
  --space-9:        96px;
  --space-10:       128px;

  /* Swiss design = no radii. Use sparingly, only for UI affordances. */
  --r-none:         0;
  --r-sm:           2px;
  --r-md:           4px;

  /* Hairlines */
  --rule-thin:      1px solid var(--rule);
  --rule-thick:     2px solid var(--rule);
  --rule-heavy:     4px solid var(--rule);

  /* Grid */
  --grid-cols:      12;
  --grid-gutter:    24px;
  --page-pad-x:     clamp(16px, 4vw, 64px);
}

/* ─── Semantic element styles ─────────────────────────────────────── */

html {
  font-family: var(--font-text);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lh-text);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  background: var(--bg-1);
  margin: 0;
}

.t-mega {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-h3);
  line-height: var(--lh-text);
  letter-spacing: var(--tr-normal);
  margin: 0;
}

.t-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

/* Bilingual hierarchy — French primary (bold), English secondary (light).
   Direct from the campaign spec: Bold @ 90pt FR, Light @ 45pt EN. */
.t-fr-primary {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
}
.t-en-secondary {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-snug);
}

p, .t-body {
  font-family: var(--font-text);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  letter-spacing: var(--tr-snug);
  margin: 0 0 1em 0;
}

.t-small  { font-size: var(--t-small); line-height: 1.4; }
.t-foot   { font-size: var(--t-foot);  line-height: 1.3; color: var(--fg-on-color); opacity: .9; }
.t-caps   { text-transform: uppercase; letter-spacing: var(--tr-caps); }
.t-mono   { font-family: var(--font-mono); }

/* Quote marks — campaign uses guillemets in FR and curly quotes in EN.
   Set on a wrapping element. */
.q-fr::before { content: "« "; }
.q-fr::after  { content: " »"; }
.q-en::before { content: "\201C"; }
.q-en::after  { content: "\201D"; }

/* Hairline rule — used under header bar on every poster */
.hr-poster {
  border: 0;
  border-top: var(--rule-thin);
  margin: 0;
}