/* ==========================================================================
   OPEQ — Colors & Type
   Ordinateurs pour les écoles du Québec
   Source: official PPTX theme (clrScheme name="OPEQ"), brand fonts package.
   ========================================================================== */

/* ----- FONTS ----- */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("./fonts/BigShouldersDisplay-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "Figtree"; src: url("./fonts/Figtree-Light.ttf")    format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("./fonts/Figtree-Regular.ttf")  format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("./fonts/Figtree-Medium.ttf")   format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("./fonts/Figtree-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("./fonts/Figtree-Bold.ttf")     format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("./fonts/Figtree-ExtraBold.ttf"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("./fonts/Figtree-Black.ttf")    format("truetype"); font-weight: 900; font-display: swap; }

:root {
  /* ---------- COLOR — BRAND PRIMITIVES ---------- */
  /* From OPEQ PPTX clrScheme. These are the only colors the brand sanctions. */
  --opeq-blue:        #28AADE;  /* accent1 — primary brand blue, the "OPEQ blue" of the logo */
  --opeq-blue-light:  #93CEE0;  /* accent4 — softer companion blue, used in WOW! / ÉCO! tokens */
  --opeq-green:       #99CB4F;  /* accent2 — lime green, used for AGILES / ACCESSIBLE star */
  --opeq-green-deep:  #4EA72E;  /* accent6 — deeper green, used for Charlie body & section frames */
  --opeq-yellow:      #F6EB61;  /* accent3 — sunny yellow, used for ENGAGÉS / PERFORMANT bubble */
  --opeq-navy:        #0E2841;  /* dk2 — deep navy, primary dark surface */
  --opeq-ink:         #1C2B38;  /* dk1 — body text & accent5 outline color (warm-cool near-black) */
  --opeq-cream:       #F5F3F0;  /* lt1 — page background, slightly warm off-white */
  --opeq-pearl:       #E8E8E8;  /* lt2 — neutral light gray for dividers / muted surfaces */
  --opeq-link:        #467886;  /* hlink — link blue, slate-teal */
  --opeq-link-visited:#96607D;  /* folHlink — dusty plum, for visited links */

  /* Accent helpers (hand-mixed, NOT in PPTX theme — for hover/press only) */
  --opeq-blue-700:    #1F8DBA;  /* hover / pressed blue, ~12% darker */
  --opeq-blue-50:     #E7F6FC;  /* lightest blue tint, surface only */
  --opeq-navy-soft:   #1B3A5C;  /* navy hover */
  --opeq-green-700:   #3F8A23;  /* deep green hover */

  /* ---------- COLOR — SEMANTIC ---------- */
  --bg:               var(--opeq-cream);
  --bg-elev:          #FFFFFF;
  --bg-dark:          var(--opeq-navy);
  --bg-brand:         var(--opeq-blue);
  --bg-muted:         var(--opeq-pearl);

  --fg:               var(--opeq-ink);     /* primary text on light surfaces */
  --fg-muted:         #5A6470;             /* derived from ink @ 65% — captions, meta */
  --fg-subtle:        #8A929B;             /* derived — placeholders */
  --fg-on-dark:       var(--opeq-cream);   /* text on navy / blue */
  --fg-on-brand:      #FFFFFF;             /* text on opeq-blue */
  --fg-inverse:       #FFFFFF;

  --border:           rgba(28, 43, 56, 0.12);
  --border-strong:    rgba(28, 43, 56, 0.24);
  --border-on-dark:   rgba(245, 243, 240, 0.16);

  --link:             var(--opeq-link);
  --link-visited:     var(--opeq-link-visited);

  --success:          var(--opeq-green-deep);
  --warning:          #C99A12;              /* yellow darkened for accessibility */
  --danger:           #C8462C;              /* warm red — not in palette, hand-mixed for forms only */
  --info:             var(--opeq-blue);

  /* ---------- TYPE — FAMILIES ---------- */
  --font-display:     "Big Shoulders Display", "Big Shoulders", "Oswald", "Arial Narrow", sans-serif;
  --font-body:        "Figtree", "Helvetica Neue", "Arial", sans-serif;
  --font-mono:        "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ---------- TYPE — SCALE (1.250 major-third on 16px base) ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  --ls-display: -0.01em;   /* Big Shoulders is condensed; tight tracking suits headlines */
  --ls-body:    0;
  --ls-eyebrow: 0.08em;    /* uppercase Figtree labels */

  /* ---------- SPACING / RADII / SHADOWS ---------- */
  --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;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm:  0 1px 2px rgba(14, 40, 65, 0.06), 0 1px 1px rgba(14, 40, 65, 0.04);
  --shadow-md:  0 4px 12px rgba(14, 40, 65, 0.08), 0 2px 4px rgba(14, 40, 65, 0.05);
  --shadow-lg:  0 16px 32px rgba(14, 40, 65, 0.12), 0 4px 8px rgba(14, 40, 65, 0.06);
  --shadow-glow-blue: 0 0 0 4px rgba(40, 170, 222, 0.18);
}

/* ==========================================================================
   SEMANTIC TYPE STYLES
   Big Shoulders Display: only at 900 weight (only weight shipped). UPPERCASE.
   Figtree: 300/400/500/600/700/800/900 — body / UI / labels.
   ========================================================================== */
html { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
body { font-family: var(--font-body); font-weight: 400; line-height: var(--lh-normal); }

.opeq-display,
h1.opeq-h1,
.opeq-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-96);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.opeq-h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
}
.opeq-h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-56);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
}
.opeq-h4 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  margin: 0;
}
.opeq-h5 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  margin: 0;
}
.opeq-h6 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  margin: 0;
}

.opeq-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--opeq-blue);
}

.opeq-lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-24);
  line-height: var(--lh-loose);
  color: var(--fg);
}

.opeq-body,
p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg);
}
.opeq-body-sm { font-size: var(--fs-14); line-height: var(--lh-normal); }
.opeq-caption { font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--fg-muted); }
.opeq-mono { font-family: var(--font-mono); font-size: var(--fs-14); }

a, .opeq-link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--opeq-blue); text-decoration-thickness: 2px; }
a:visited { color: var(--link-visited); }