/* ==========================================================================
   HotNews — Colors & Type
   Tokens extracted directly from the Figma "Hotnews – Premium Preview".
   Values map 1:1 to the most-used colors/fonts found in /METADATA.md.
   ========================================================================== */

/* -- Fonts ---------------------------------------------------------------- */
/* Radio Canada — headlines (Bold / SemiBold)
   Bitter           — long-form body serif (Regular / Bold / Italic / Black)
   Plus Jakarta Sans — UI, pills, metadata, buttons (ExtraBold / Bold / SemiBold / Regular)
   Nohemi           — special display accent (ExtraBold)
                      Nohemi is a commercial font, no free Google equivalent.
                      Substituted with Plus Jakarta Sans 800 — FLAG TO USER. */
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Radio+Canada:wght@400;500;600;700&display=swap');

:root {
  /* -- Brand colors (named) ---------------------------------------------- */
  --ink:           rgb(36, 42, 59);    /* #242A3B  primary text / dark surfaces */
  --ink-900:       rgb(36, 38, 43);    /* #24262B  near-black */
  --blue:          rgb(33, 69, 172);   /* #2145AC  brand primary, wordmark */
  --blue-pure:     rgb(1, 43, 247);    /* #012BF7  accent "pure" blue (partner logos) */
  --yellow:        rgb(255, 169, 0);   /* #FFA900  brand yellow, arc mark, CTAs */
  --yellow-bright: rgb(255, 219, 0);   /* #FFDB00  brighter yellow accent */
  --yellow-warm:   rgb(255, 217, 79);  /* #FFD94F  soft yellow */
  --yellow-amber:  rgb(255, 149, 0);   /* #FF9500  secondary accent */
  --red:           rgb(225, 0, 0);     /* #E10000  breaking / alert */
  --rose:          rgb(179, 123, 123); /* #B37B7B  soft rose (tag wash) */
  --green:         rgb(52, 168, 83);   /* #34A853  positive */
  --white:         rgb(255, 255, 255);
  --black:         rgb(0, 0, 0);

  /* -- Surfaces ---------------------------------------------------------- */
  --bg:            #ffffff;
  --surface-1:     rgb(241, 244, 255); /* #F1F4FF  cool-blue paper — cards, pills, quote blocks */
  --surface-2:     rgb(218, 218, 218); /* #DADADA  neutral gray (dividers, placeholders) */
  --surface-3:     rgb(214, 217, 221); /* #D6D9DD  tinted neutral */

  /* -- Text -------------------------------------------------------------- */
  --fg-1:          var(--ink);                   /* primary */
  --fg-2:          rgba(36, 42, 59, 0.9);        /* secondary */
  --fg-3:          rgba(36, 42, 59, 0.75);       /* tertiary / overlay */
  --fg-muted:      rgba(36, 42, 59, 0.5);        /* placeholder, captions */
  --fg-faint:      rgba(36, 42, 59, 0.35);       /* disabled */
  --fg-on-dark:    var(--white);
  --fg-on-blue:    var(--white);
  --fg-link:       var(--blue);
  --fg-accent:     var(--yellow);

  /* -- Borders / strokes ------------------------------------------------- */
  --border-soft:   rgba(36, 42, 59, 0.15);
  --border-muted:  rgba(36, 42, 59, 0.25);
  --border-strong: var(--ink);
  --border-white-25: rgba(255, 255, 255, 0.25);
  --border-white-50: rgba(255, 255, 255, 0.5);

  /* -- Shadows (pulled from Figma raw) ---------------------------------- */
  --shadow-pill:   0 1px 4px 0 rgba(33, 69, 172, 0.25);
  --shadow-card:   0 1px 3px 0 rgba(0, 0, 0, 0.09), 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 10px 20px 0 rgba(0, 0, 0, 0.01);
  --shadow-card-lg: 0 2px 4px 0 rgba(33, 69, 172, 0.15), 0 12px 32px 0 rgba(33, 69, 172, 0.15);
  --shadow-sunk:   inset 0 1px 2px rgba(36, 42, 59, 0.08);

  /* -- Radii ------------------------------------------------------------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 32px;
  --r-full: 2000px;

  /* -- Spacing scale (4px base, from observed gaps & paddings) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  56px;
  --space-10: 64px;
  --space-12: 80px;
  --space-16: 102px; /* Desktop gutter */

  /* -- Layout ------------------------------------------------------------ */
  --container-max: 1284px;   /* observed content width inside 1440 viewport */
  --gutter-desktop: 102px;
  --gutter-mobile:  16px;
  --nav-height:     88px;
  --mobile-nav-h:   126px;

  /* -- Type ramp --------------------------------------------------------- */
  /* Font families */
  --font-display: 'Radio Canada', 'Inter', system-ui, sans-serif;
  --font-serif:   'Bitter', 'Source Serif Pro', Georgia, serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent:  'Plus Jakarta Sans', system-ui, sans-serif; /* Nohemi substitute */

  /* Display (hero + pullquote lead-in) */
  --ts-display-xl-size:  48px;
  --ts-display-xl-lh:    1.1;
  --ts-display-xl-ls:    -0.03em;

  --ts-display-lg-size:  40px;
  --ts-display-lg-lh:    1.1;
  --ts-display-lg-ls:    -0.025em;

  /* Headlines */
  --ts-h1-size:  32px;
  --ts-h1-lh:    1.15;
  --ts-h1-ls:    -0.02em;

  --ts-h2-size:  28px;
  --ts-h2-lh:    1.15;
  --ts-h2-ls:    -0.02em;

  --ts-h3-size:  24px;
  --ts-h3-lh:    1.15;
  --ts-h3-ls:    -0.01em;

  --ts-h4-size:  21px;
  --ts-h4-lh:    1.2;
  --ts-h4-ls:    -0.01em;

  --ts-h5-size:  18px;
  --ts-h5-lh:    1.25;
  --ts-h5-ls:    -0.005em;

  /* Body serif */
  --ts-body-lg-size:  20px;   /* observed primary reading size */
  --ts-body-lg-lh:    1.5;
  --ts-body-lg-ls:    -0.001em;

  --ts-body-size:     18px;
  --ts-body-lh:       1.55;

  --ts-body-sm-size:  16px;
  --ts-body-sm-lh:    1.5;

  /* UI sans */
  --ts-ui-size:       14px;
  --ts-ui-lh:         1.4;

  --ts-ui-sm-size:    12px;
  --ts-ui-sm-lh:      1.35;
  --ts-ui-sm-ls:      0.05em;

  /* Eyebrow / label (always tracked) */
  --ts-eyebrow-size:  12px;
  --ts-eyebrow-lh:    1.35;
  --ts-eyebrow-ls:    0.1em;

  /* Pullquote */
  --ts-pullquote-size: 28px;
  --ts-pullquote-lh:   1.35;
}

/* -- Base + semantic selectors ------------------------------------------ */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-serif);
  font-size: var(--ts-body-size);
  line-height: var(--ts-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; color: var(--fg-1); margin: 0; }

h1 { font-size: var(--ts-h1-size); line-height: var(--ts-h1-lh); letter-spacing: var(--ts-h1-ls); }
h2 { font-size: var(--ts-h2-size); line-height: var(--ts-h2-lh); letter-spacing: var(--ts-h2-ls); }
h3 { font-size: var(--ts-h3-size); line-height: var(--ts-h3-lh); letter-spacing: var(--ts-h3-ls); }
h4 { font-size: var(--ts-h4-size); line-height: var(--ts-h4-lh); letter-spacing: var(--ts-h4-ls); }
h5 { font-size: var(--ts-h5-size); line-height: var(--ts-h5-lh); letter-spacing: var(--ts-h5-ls); }

p  { margin: 0 0 1em; font-family: var(--font-serif); }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--ts-eyebrow-size);
  line-height: var(--ts-eyebrow-lh);
  letter-spacing: var(--ts-eyebrow-ls);
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow--on-dark { color: var(--white); }

.ui { font-family: var(--font-sans); font-size: var(--ts-ui-size); line-height: var(--ts-ui-lh); }
.ui-sm { font-family: var(--font-sans); font-size: var(--ts-ui-sm-size); line-height: var(--ts-ui-sm-lh); letter-spacing: var(--ts-ui-sm-ls); font-weight: 700; }

.body-lg { font-family: var(--font-serif); font-size: var(--ts-body-lg-size); line-height: var(--ts-body-lg-lh); letter-spacing: var(--ts-body-lg-ls); }
.body    { font-family: var(--font-serif); font-size: var(--ts-body-size); line-height: var(--ts-body-lh); }
.body-sm { font-family: var(--font-serif); font-size: var(--ts-body-sm-size); line-height: var(--ts-body-sm-lh); }

.pullquote { font-family: var(--font-serif); font-weight: 700; font-size: var(--ts-pullquote-size); line-height: var(--ts-pullquote-lh); color: var(--fg-1); }

.display-xl { font-family: var(--font-display); font-weight: 700; font-size: var(--ts-display-xl-size); line-height: var(--ts-display-xl-lh); letter-spacing: var(--ts-display-xl-ls); color: var(--blue); }
.display-lg { font-family: var(--font-display); font-weight: 700; font-size: var(--ts-display-lg-size); line-height: var(--ts-display-lg-lh); letter-spacing: var(--ts-display-lg-ls); color: var(--blue); }