/* Design tokens - AKF Family History Conversation Cards
   Palette:  text fills measured from Storyboard 5a Part 1 and Part 2
   Geometry: measured off Storyboard 2a, a 1280x720pt artboard
   Type:     Storyboard 2a embeds Montserrat (Bold / SemiBold / Medium /
             Regular), not the Roboto named in Pre-Style Guide 1b. The bundled
             files are the OFL release from Google Fonts, not the Adobe CC
             activation on this machine. See Montserrat-OFL.txt. */

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Artboard ---- */
  --stage-w: 1280;
  --stage-h: 720;

  /* ---- Palette (Storyboard 5a text fills) ---- */
  --navy: #00599c; /* titles, cover, topic labels, filled buttons */
  --navy-deep: #005496; /* three warm-up titles and the Prevention overview teaser */
  --option: #00589c; /* unselected answer labels */
  --teal: #4b9a8e; /* Home, Help, Glossary, "Myth busted!", "It's a fact!" */
  --follow: #49a59c; /* "Follow-up" on a question card */
  --myth-wrong: #cc6969; /* "Nice try" */
  --card-num: #142b52; /* numbers on the question cards */
  --meter-empty: #969696; /* power meter at 0% */
  --aqua: #75cac9;
  --sky: #2ea1dc;
  --ice: #dff0fa;
  --mint: #e3f4f4;
  --lime: #b8d537;
  --grey: #949495;
  --paper: #f7f7f8;
  --white: #ffffff;

  /* Derived */
  --navy-hover: #00477f;
  --teal-hover: #3c8177;
  --navy-disabled: #cfdbe8;
  --ink: #000000;
  --shadow-panel: 0 6px 24px rgba(0, 89, 156, 0.18);
  --shadow-pop: 0 4px 18px rgba(0, 0, 0, 0.16);

  /* ---- Type ---- */
  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fw-bold: 600; /* default for strong / formerly Bold */
  --fs-title: 30px; /* Heading, Bold */
  --fs-subhead: 25px; /* Subheading, SemiBold */
  --fs-instruction: 20px; /* Instruction, Medium */
  --fs-body: 16px; /* Content, Regular (minimum) */
  --fs-small: 15px;
  --fs-label: 15px;

  /* ---- Shell geometry (artboard px) ---- */
  --gutter: 26px;
  --title-top: 22px;
  --subtitle-gap: 12px;

  --badges-right: 16px;
  --badges-top: 7px;
  --badges-w: 67px;
  --badges-h: 83.55px;

  --nav-top: 550px;
  --nav-h: 45px;
  --pill-min-w: 155px;

  --footer-top: 618px;
  --footer-h: 102px;
  --footer-pad-x: 23px;
  --footer-pad-t: 15px;
  --footer-gap: 16px;
  --footer-circle: 48px;

  --radius-pill: 999px;
  --radius-card: 12px;
  --radius-panel: 14px;

  /* ---- Breakpoints (read by shell.js; unitless px) ----
     Mobile when the arena is narrower than --bp-mobile-w, or a short
     landscape phone (height under --bp-short-h and width under --bp-short-w).
     Also mobile whenever the artboard would draw below --bp-min-scale, or
     the screen is portrait.
     Stacked screens at least --bp-tablet-w wide and --bp-short-h tall get
     the tablet layout.
     Everything else letterboxes the artboard. */
  --bp-mobile-w: 600;
  --bp-short-h: 500;
  --bp-short-w: 960;
  --bp-min-scale: 0.75;
  --bp-tablet-w: 700;

  /* ---- Tablet layout (stacked, wider column) ---- */
  --t-gutter: 32px;
  --t-col: 880px;

  /* ---- Mobile layout ---- */
  --m-gutter: 16px;
  --m-gap: 16px;
}