/* ============================================================================
   InstantMD design tokens
   ----------------------------------------------------------------------------
   Source of truth: Figma "Instant MD Redesign" → Primitives + Color variable
   collections and the token-reference frame (names kept verbatim), plus the
   measured Home – Final frames (type scale, radii, shadows, spacing).
   Loaded from base.html BEFORE style.css. Pure declarations only: fonts and
   custom properties. The theme/Bootstrap bridge that re-points the old
   variable names at these tokens lives in tokens-bridge.css (loaded AFTER
   style.css, because the theme and Bootstrap define the same names on :root
   and the later declaration wins).
   Fonts: Poppins + Source Sans 3, Google Fonts, SIL Open Font License,
   self-hosted from static/assets/fonts (latin + latin-ext subsets).
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
/* Poppins 400 — latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 400 — latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 500 — latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 500 — latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 600 — latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 600 — latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 700 — latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 700 — latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Sans 3 400 700 — latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/source-sans-3/source-sans-3-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Sans 3 400 700 — latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/source-sans-3/source-sans-3-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* 2. Primitives — Layer 1. Never use directly in components. ------------ */
  --primitive-white: #FFFFFF;
  --primitive-navy-900: #0A2540;
  --primitive-blue-600: #0169E2;
  --primitive-blue-300: #7FB2F0;
  --primitive-charcoal-700: #4A4F55;
  --primitive-charcoal-500: #6B6F74;
  --primitive-grey-300: #C3C8CF;
  --primitive-grey-200: #E3E6EA;
  --primitive-grey-50: #F6F7F8;
  --primitive-mist-300: #C9D3DF;
  --primitive-red-700: #B42318;
  --primitive-navy-900-rgb: 10, 37, 64;
  --primitive-blue-600-rgb: 1, 105, 226;
  --primitive-red-700-rgb: 180, 35, 24;
  --primitive-stroke-0: 0;
  --primitive-stroke-1: 1px;
  --primitive-stroke-1-5: 1.5px;
  --primitive-stroke-2: 2px;

  /* 3. Colour — Layer 2 semantic tokens. Components use these exclusively. -- */
  /* Text */
  --color-text-heading: var(--primitive-navy-900);      /* H1–H3, card titles, FAQ questions, key numbers */
  --color-text-body: var(--primitive-charcoal-700);     /* paragraphs, card descriptions, FAQ answers */
  --color-text-support: var(--primitive-charcoal-500);  /* captions, qualifiers, helper text */
  --color-text-highlight: var(--primitive-blue-600);    /* blue words in two-colour headlines, eyebrows */
  --color-text-link: var(--primitive-blue-600);         /* links, underlined, white backgrounds only */
  --color-text-on-dark: var(--primitive-white);
  --color-text-on-dark-muted: var(--primitive-mist-300);
  --color-text-on-dark-accent: var(--primitive-blue-300);
  --color-text-on-button: var(--primitive-white);
  --color-text-error: var(--primitive-red-700);
  /* Section background */
  --color-bg-page: var(--primitive-white);
  --color-bg-dark: var(--primitive-navy-900);           /* final CTA band and footer */
  /* Surface */
  --color-surface-card: var(--primitive-white);
  --color-surface-subtle: var(--primitive-grey-50);
  --color-surface-dark-card: var(--primitive-navy-900);
  /* Image background */
  --color-image-bg-product: var(--primitive-grey-50);
  --color-image-bg-portrait: var(--primitive-grey-50);
  --color-image-bg-none: var(--primitive-white);
  /* Border */
  --color-border-default: var(--primitive-grey-200);
  --color-border-input: var(--primitive-grey-300);
  --color-border-focus: var(--primitive-blue-600);
  --color-border-highlight: var(--primitive-blue-600);
  --color-border-error: var(--primitive-red-700);
  /* Icon */
  --color-icon-default: var(--primitive-navy-900);
  --color-icon-trust: var(--primitive-charcoal-500);
  --color-icon-brand: var(--primitive-blue-600);
  --color-icon-on-dark: var(--primitive-white);
  --color-icon-error: var(--primitive-red-700);
  /* Button */
  --color-button-primary-bg: var(--primitive-blue-600);
  --color-button-primary-bg-hover: var(--primitive-navy-900);
  --color-button-primary-text: var(--primitive-white);
  --color-button-secondary-bg: var(--primitive-white);
  --color-button-secondary-border: var(--primitive-navy-900);
  --color-button-secondary-text: var(--primitive-navy-900);
  --color-button-inverse-bg: var(--primitive-white);
  --color-button-inverse-text: var(--primitive-navy-900);
  --color-button-focus-ring: var(--primitive-blue-600);
  /* Component-specific */
  --color-matrix-instantmd-header: var(--primitive-blue-600);
  --color-matrix-instantmd-cell: var(--primitive-white);
  --color-bmi-track: var(--primitive-grey-200);
  --color-bmi-threshold: var(--primitive-charcoal-500);
  --color-bmi-marker: var(--primitive-blue-600);
  --color-step-number: var(--primitive-blue-600);
  /* Tag */
  --color-tag-bg: var(--primitive-white);
  --color-tag-bg-on-white: var(--primitive-grey-50);
  --color-tag-border: var(--primitive-grey-200);
  --color-tag-text: var(--primitive-navy-900);
  --color-tag-icon: var(--primitive-blue-600);

  /* 4. Strokes — width + colour shorthands ------------------------------- */
  --stroke-width-default: var(--primitive-stroke-1);
  --stroke-width-input: var(--primitive-stroke-1);
  --stroke-width-focus: var(--primitive-stroke-2);
  --stroke-width-error: var(--primitive-stroke-2);
  --stroke-width-highlight: var(--primitive-stroke-2);
  --stroke-width-icon: var(--primitive-stroke-1-5);
  --stroke-default: var(--stroke-width-default) solid var(--color-border-default);
  --stroke-divider: var(--stroke-width-default) solid var(--color-border-default);
  --stroke-input: var(--stroke-width-input) solid var(--color-border-input);
  --stroke-focus: var(--stroke-width-focus) solid var(--color-border-focus);
  --stroke-error: var(--stroke-width-error) solid var(--color-border-error);
  --stroke-highlight: var(--stroke-width-highlight) solid var(--color-border-highlight);
  --stroke-button-primary: var(--primitive-stroke-1) solid var(--color-button-primary-bg);
  --stroke-button-secondary: var(--primitive-stroke-1-5) solid var(--color-button-secondary-border);
  --stroke-button-inverse: var(--primitive-stroke-1) solid var(--color-button-inverse-bg);
  --stroke-none: 0 solid transparent;
  /* :focus-visible ring — 2px white gap then 2px blue */
  --focus-ring: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-button-focus-ring);

  /* 5. Shadows — navy at low opacity, never black --------------------------- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(var(--primitive-navy-900-rgb), 0.06);
  --shadow-sm: 0 4px 12px rgba(var(--primitive-navy-900-rgb), 0.13);       /* buttons, hover cards, sticky header */
  --shadow-md: 0 12px 32px rgba(var(--primitive-navy-900-rgb), 0.16);      /* dropdowns, tooltips, consent bar */
  --shadow-portrait: 0 12px 32px rgba(var(--primitive-navy-900-rgb), 0.13);
  --shadow-image: drop-shadow(0 12px 24px rgba(var(--primitive-navy-900-rgb), 0.18)); /* CSS filter for product cut-outs */

  /* 6. Type ----------------------------------------------------------------- */
  --font-heading: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  /* Mobile scale (Home – Final 375 frames). Desktop values below. */
  --text-display: 32px;      /* hero headline */
  --text-h1: 24px;           /* page/question headline */
  --text-h2: 20px;           /* section headline */
  --text-h3: 18px;
  --text-h4: 16px;           /* card titles */
  --text-body-lg: 18px;
  --text-body: 16px;         /* never below 16px for patient-facing body copy */
  --text-body-sm: 14px;      /* small print, hints */
  --text-caption: 12px;
  --text-eyebrow: 12px;      /* uppercase Poppins Medium, blue */
  --text-button: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.5;
  --leading-small: 1.45;
  --tracking-eyebrow: 0.04em;

  /* 7. Spacing (Figma "Spacing" collection) --------------------------------- */
  --space-4: 4px;  --space-8: 8px;  --space-12: 12px; --space-16: 16px; --space-20: 20px;
  --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px; --space-48: 48px;
  --space-56: 56px; --space-64: 64px; --space-80: 80px; --space-88: 88px; --space-120: 120px; --space-180: 180px;

  /* 8. Radius (measured) ---------------------------------------------------- */
  --radius-sm: 12px;    /* inputs, slot chips */
  --radius-md: 16px;    /* option rows, small cards, alerts */
  --radius-lg: 24px;    /* cards, product cards, sheets */
  --radius-xl: 30px;    /* BMI calculator container */
  --radius-pill: 100px; /* buttons, tags, progress rail */

  /* 9. Layout ---------------------------------------------------------------- */
  --container-max: 1600px;   /* Home – Final desktop: 1920 frame with 160px side padding */
  --gutter: 20px;
  --section-pad-y: 32px;
  --section-gap: 40px;
  --tap-target: 44px;
  --control-height: 48px;    /* buttons */
  --input-height: 68px;      /* BMI-calculator style inputs */
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --section-pad-y: 48px; }
}
@media (min-width: 1024px) {
  /* Desktop scale = Figma "01 · Desktop · Home page (1920)", 05 Oct 2026 (re-measured 2026-10-11 after the UI audit):
     48/58 headlines, 22/30 section leads, 16/24 semibold eyebrows, 52px buttons with a 20px label, 96px section padding. */
  :root {
    --text-display: 48px;
    --text-h1: 48px;
    --text-h2: 48px;
    --text-h3: 28px;
    --text-h4: 20px;
    --text-body-lg: 22px;
    --text-body: 18px;
    --text-body-sm: 16px;
    --text-caption: 14px;
    --text-eyebrow: 16px;
    --text-button: 20px;
    --control-height: 52px;
    --gutter: 64px;
    --section-pad-y: 96px;
  }
}
@media (min-width: 1440px) { :root { --gutter: 120px; } }
@media (min-width: 1920px) { :root { --gutter: 160px; } }   /* the frame: 160px margins, 1600px content */