/*
 * tokens.type.css — Prevu typography for InstaMortgage (btheme)
 * Source: "PRD: InstaMortgage Typography -> Prevu Typography" v1, 7 Oct 2026.
 *
 * One typeface (Roboto), three loaded weights (400 / 500 / 700).
 * Sizes are px, NOT rem: the Insta root font size is 13-14px, so a rem copy of
 * Prevu's scale would render ~19% too small. Do not change the html font size here.
 *
 * Rules the scale encodes:
 *  - Big type tracks tight (negative --ls-*), uppercase labels track wide, body has none.
 *  - Marketing section headings are large and Regular (--type-section, base-800), not bold.
 *  - Emphasis is 700. Never declare 300 / 600 / 800 / 900 — use --fw-*.
 *  - The font shorthand resets font-style; set font-style: italic after it if needed.
 *
 * Load order: tokens.color.css, tokens.type.css, then every other theme stylesheet.
 */

@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/roboto/roboto-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;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/roboto/roboto-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;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/roboto/roboto-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;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/roboto/roboto-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;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/roboto/roboto-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;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/roboto/roboto-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 {
  --font-sans: Roboto, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --type-display: 700 46px/1.05 var(--font-sans);           --ls-display: -0.035em;
  --type-h1: 700 34px/1.15 var(--font-sans);                --ls-h1: -0.03em;
  --type-h1-compact: 700 28px/1.2 var(--font-sans);        --ls-h1-compact: -0.025em;
  --type-section: 400 33px/1.2 var(--font-sans);           --ls-section: normal;
  --type-h2: 400 24px/1.17 var(--font-sans);                --ls-h2: normal;
  --type-h3: 700 19px/1.25 var(--font-sans);                --ls-h3: -0.02em;
  --type-card-title: 700 15px/1.4 var(--font-sans);        --ls-card-title: -0.01em;
  --type-subtitle: 400 18px/1.6 var(--font-sans);          --ls-subtitle: normal;
  --type-stat: 700 23px/1 var(--font-sans);              --ls-stat: -0.02em;
  --type-body: 400 16px/1.5 var(--font-sans);              --ls-body: normal;
  --type-body-sm: 400 14px/1.65 var(--font-sans);           --ls-body-sm: normal;
  --type-caption: 400 12px/1.5 var(--font-sans);           --ls-caption: normal;
  --type-label: 700 12px/1.5 var(--font-sans);             --ls-label: 0.04em;
  --type-nav: 700 15px/1.75 var(--font-sans);               --ls-nav: 0.02857em;
  --type-button: 700 16px/1.15 var(--font-sans);            --ls-button: normal;
  --type-button-sm: 700 13px/1.15 var(--font-sans);         --ls-button-sm: normal;
  --type-input: 400 16px/1.5 var(--font-sans);             --ls-input: normal;
}

@media (max-width: 767px) {
  :root {
    --type-display: 700 34px/1.05 var(--font-sans);
    --type-section: 400 28px/1.2 var(--font-sans);
    --type-subtitle: 400 16px/1.6 var(--font-sans);
  }
}

/* Utility classes: one per token, so templates never set font properties directly */
.t-display { font: var(--type-display); letter-spacing: var(--ls-display); }
.t-h1 { font: var(--type-h1); letter-spacing: var(--ls-h1); }
.t-h1-compact { font: var(--type-h1-compact); letter-spacing: var(--ls-h1-compact); }
.t-section { font: var(--type-section); letter-spacing: var(--ls-section); color: var(--base-800); }
.t-h2 { font: var(--type-h2); letter-spacing: var(--ls-h2); }
.t-h3 { font: var(--type-h3); letter-spacing: var(--ls-h3); }
.t-card-title { font: var(--type-card-title); letter-spacing: var(--ls-card-title); }
.t-subtitle { font: var(--type-subtitle); letter-spacing: var(--ls-subtitle); }
.t-stat { font: var(--type-stat); letter-spacing: var(--ls-stat); }
.t-body { font: var(--type-body); letter-spacing: var(--ls-body); }
.t-body-sm { font: var(--type-body-sm); letter-spacing: var(--ls-body-sm); }
.t-caption { font: var(--type-caption); letter-spacing: var(--ls-caption); }
.t-label { font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.t-nav { font: var(--type-nav); letter-spacing: var(--ls-nav); }
.t-button { font: var(--type-button); letter-spacing: var(--ls-button); }
.t-button-sm { font: var(--type-button-sm); letter-spacing: var(--ls-button-sm); }
.t-input { font: var(--type-input); letter-spacing: var(--ls-input); }

/* Element defaults */
body { font: var(--type-body); letter-spacing: normal; }
h1 { font: var(--type-h1); letter-spacing: var(--ls-h1); }
h2 { font: var(--type-section); letter-spacing: normal; }
h3, h4, h5 { font: var(--type-h3); letter-spacing: var(--ls-h3); }
h6 { font: var(--type-body); letter-spacing: normal; }
p, li, td, th, dd, dt { letter-spacing: normal; }
strong, b { font-weight: var(--fw-bold); }
small { font: var(--type-caption); }
input, select, textarea, button { font-family: var(--font-sans); }
input, select, textarea { font-size: 16px; }  /* 16px stops iOS Safari zooming on focus */