/* ==========================================================================
   FtC website 2026 — design tokens
   Source: Figma "Dev ready - Website 2026" (FtCW styles) + Ira's brief.
   Names mirror the Figma text styles so the two can be compared directly.
   ========================================================================== */

/* ---- Fonts (self-hosted, web copies of the brand fonts) ---------------- */
@font-face {
  font-family: "Advercase";
  src: url("../fonts/Advercase-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --c-black: #000000;
  --c-white: #ffffff;
  --c-ink-70: rgba(0, 0, 0, 0.7);
  --c-ink-60: rgba(0, 0, 0, 0.6);
  --c-ink-50: rgba(0, 0, 0, 0.5);
  --c-ink-40: rgba(0, 0, 0, 0.4);
  --c-ink-20: rgba(0, 0, 0, 0.2);

  --c-lilac: #ded2ff;        /* countdown box, hero fade, section tops */
  --c-lilac-soft: #ebe6f1;
  --c-mist: #e4eef0;         /* recurring section base */
  --c-mist-warm: #e4e0e9;
  --c-sky: #b4cbdc;
  --c-sky-deep: #beceec;
  --c-sky-pale: #dff0ff;
  --c-periwinkle: #aabee6;
  --c-cream: #fff0dd;
  --c-white-warm: #fefeff;
  --c-border-blue: #accadc;  /* outline buttons, video pill */
  --c-live-green: #4cf340;   /* "CfP is live" dot */
  --c-tag: rgba(255, 255, 255, 0.27);
  --c-card-70: rgba(255, 255, 255, 0.7);

  /* ---- Radii ----------------------------------------------------------- */
  --r-xl: 28px;   /* big cards: features, tracks, CTA */
  --r-lg: 26px;   /* image inset inside a 28px card */
  --r-md: 12px;   /* buttons, tags, metrics, photos, small cards */
  --r-sm: 8px;    /* nav pill, video pill */

  /* ---- Spacing (Ira: spacing is final) --------------------------------- */
  --s-section-top: 180px;
  --s-section-bottom: 40px;
  --s-gutter: 12px;

  /* ---- Type families --------------------------------------------------- */
  --f-display: "Advercase", "Times New Roman", serif;
  --f-sans: "Geist", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- Type styles (FtCW styles/…) ---------------------------------------
   Apply as classes. Sizes are the desktop (-D) values; tablet/mobile
   overrides come in a later drop.                                          */
.t-h1 {           /* Forum wordmark on the hero */
  font: 400 120px/1 var(--f-display);
  letter-spacing: 0;
}
.t-h2 {           /* FtC-H2-D */
  font: 400 64px/1.1 var(--f-display);
  letter-spacing: 0;
}
.t-h3-caps {      /* CTA headline */
  font: 400 90px/1 var(--f-display);
  text-transform: uppercase;
}
.t-h4 {           /* FtC-H4-D */
  font: 500 36px/1.1 var(--f-sans);
  letter-spacing: -0.03em;
}
.t-h4-light {     /* FtC-H4-D, Regular 450 (feature cards) */
  font: 450 36px/1.1 var(--f-sans);
  letter-spacing: -0.03em;
}
.t-h5 {           /* FtC-H5-D */
  font: 500 24px/28px var(--f-sans);
  letter-spacing: -0.005em;
}
.t-label {        /* FtC-label-D, labels-D */
  font: 500 20px/1.2 var(--f-sans);
  letter-spacing: 0;
}
.t-menu {         /* menu-item */
  font: 500 16px/1.2 var(--f-sans);
}
.t-tag {          /* theme tag */
  font: 500 16px/1.2 var(--f-sans);
}
.t-body-mono {    /* FtC-body-mono */
  font: 400 16px/1.2 var(--f-mono);
  letter-spacing: 0;
}
.t-meta {         /* FtC-metadata-D */
  font: 500 14px/1.2 var(--f-mono);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ---- Type: tablet (700–1024) and mobile (≤699) -------------------------
   Figma "-M" styles: H2-M 36/1, H4-M 24/28 −0.5, H5-M 20/24 −0.5,
   label-M 16, metadata-M 12, body-mono-M 14. Tablet keeps the -D sizes
   except H2, which the tablet frames set at 48.                            */
@media (max-width: 1024px) {
  .t-h2 { font-size: 48px; }
  .t-h3-caps { font-size: 64px; }
}
@media (max-width: 699px) {
  .t-h2 { font-size: 36px; line-height: 1; }
  .t-h3-caps { font-size: 40px; }
  .t-h4, .t-h4-light { font-size: 24px; line-height: 28px; letter-spacing: -0.02em; }
  .t-h5 { font-size: 20px; line-height: 24px; letter-spacing: -0.025em; }
  .t-label { font-size: 16px; }
  .t-meta { font-size: 12px; }
  .t-body-mono { font-size: 14px; }
}