/* =========================================================
   Fraction Design System — Colors & Type
   Mortgage lender, BC / ON / AB / WA
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face { font-family: "Canela"; src: url("fonts/Canela-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "Canela Deck"; src: url("fonts/CanelaDeck-Medium.woff2") format("woff2"), url("fonts/CanelaDeck-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela Deck"; src: url("fonts/CanelaDeck-Bold.woff2") format("woff2"), url("fonts/CanelaDeck-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela Deck"; src: url("fonts/CanelaDeck-Black.woff2") format("woff2"), url("fonts/CanelaDeck-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: "Avenir"; src: url("fonts/Avenir-Book.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("fonts/Avenir-Roman.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("fonts/Avenir-Medium.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("fonts/Avenir-Heavy.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("fonts/Avenir-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ---------- Core Brand Color ---------- */
  /* The sage/mint green — the Fraction signature */
  --frac-green:          #82C781;  /* primary brand green (logo, brand-exact) */
  --frac-green-deep:     #5FA368;  /* darker / hover state */
  --frac-green-dark:     #2F6B3B;  /* text-on-white accent */
  --frac-green-shade:    #1B3227;  /* deep-green accent, illustration shading */
  --frac-green-soft:     #CDE9CD;  /* tints / hover background (brand-exact) */
  --frac-green-wash:     #E6F4E6;  /* section backgrounds (brand-exact) */
  --frac-green-paper:    #F4F8F3;  /* very soft page wash */

  /* ---------- Accent ---------- */
  --frac-accent-cream:   #F4E9B8;  /* pale-yellow brand accent (stars, sparkles) */

  /* ---------- Neutrals (warm off-white -> ink black) ---------- */
  --frac-cream:          #F9FCF9;  /* paper / warm bg (brand-exact) */
  --frac-cream-2:        #F1ECE2;  /* alt section */
  --frac-white:          #FFFFFF;
  --frac-ink:            #231F20;  /* brand black (warm, brand-exact) */
  --frac-ink-2:          #2A2A2A;
  --frac-graphite:       #4A4A4A;
  --frac-slate:          #6B6B6B;
  --frac-stone:          #9A9A9A;
  --frac-line:           #E5E2DC;  /* hairline */
  --frac-line-2:         #D9D4CA;

  /* ---------- Semantic ---------- */
  --frac-success:        #5FA368;  /* same as green-deep */
  --frac-warning:        #E0A23A;
  --frac-danger:         #C24D3A;
  --frac-info:           #3F6E9B;

  /* ---------- Foreground / Background tokens ---------- */
  --fg-1:  var(--frac-ink);         /* primary text */
  --fg-2:  var(--frac-graphite);    /* secondary */
  --fg-3:  var(--frac-slate);       /* tertiary / captions */
  --fg-4:  var(--frac-stone);       /* disabled / hints */
  --fg-inv: var(--frac-white);      /* on dark */
  --fg-accent: var(--frac-green-dark);

  --bg-1:  var(--frac-cream);       /* page */
  --bg-2:  var(--frac-white);       /* card */
  --bg-3:  var(--frac-green-wash);  /* soft wash panel */
  --bg-4:  var(--frac-cream-2);     /* alt section */
  --bg-ink: var(--frac-ink);        /* dark section */

  --border-1: var(--frac-line);
  --border-2: var(--frac-line-2);
  --border-ink: var(--frac-ink);

  /* ---------- Type families ---------- */
  --font-display: "Canela Deck", "Canela", Georgia, "Times New Roman", serif;
  --font-serif: "Canela", "Canela Fallback", Georgia, "Times New Roman", serif;
  --font-sans:  "Avenir", "Avenir Next", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---------- Type weights ---------- */
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;

  /* ---------- Type scale ---------- */
  --fs-display-xl: clamp(64px, 9vw, 136px); /* hero display (serif, heavy) */
  --fs-display:    clamp(48px, 6.5vw, 96px);
  --fs-h1:         clamp(40px, 4.5vw, 64px);
  --fs-h2:         clamp(32px, 3.2vw, 48px);
  --fs-h3:         28px;
  --fs-h4:         22px;
  --fs-h5:         18px;
  --fs-lede:       20px;
  --fs-body:       17px;
  --fs-body-sm:    15px;
  --fs-caption:    13px;
  --fs-eyebrow:    12px;

  /* ---------- Line heights ---------- */
  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.4;
  --lh-body:   1.55;
  --lh-loose:  1.75;

  /* ---------- Spacing (8pt grid) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radius ---------- */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* ---------- Shadow / elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(18, 18, 18, 0.06);
  --shadow-sm: 0 2px 8px rgba(18, 18, 18, 0.06), 0 1px 2px rgba(18,18,18,.04);
  --shadow-md: 0 6px 20px rgba(18, 18, 18, 0.08), 0 2px 4px rgba(18,18,18,.04);
  --shadow-lg: 0 18px 40px rgba(18, 18, 18, 0.10), 0 4px 8px rgba(18,18,18,.06);
  --shadow-ring: 0 0 0 3px rgba(130, 199, 129, 0.45); /* focus (brand green) */

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-gentle:   cubic-bezier(.4, .0, .2, 1);
  --t-fast: 120ms;
  --t-med:  220ms;
  --t-slow: 420ms;

  /* ---------- Semantic type tokens ---------- */
  --t-display-family: var(--font-display);
  --t-heading-family: var(--font-serif);
  --t-body-family:    var(--font-sans);
}

/* =========================================================
   Semantic element defaults — use these directly, or compose.
   ========================================================= */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-xl, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}

.display, h1, h2.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg-1);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.008em;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
  letter-spacing: -0.005em;
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-h5);
  line-height: var(--lh-normal);
}

.lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lede);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.body-sm, small {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Section number (like "01 Apply") */
.section-num {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--t-fast) var(--ease-standard);
}
a:hover { opacity: 0.7; }

::selection { background: var(--frac-green-soft); color: var(--fg-1); }