/* theme.css: loaded after app.css, so rules here win. Owned by one workstream of the Faxton redesign.

   TYPE SYSTEM
   Display  : Inter Tight (wght 400-800). Headings, logo wordmark, prices and big numbers.
   Text / UI: Inter (wght 400-800). Body copy, buttons, forms, tables, chat.
   Files live in /fonts and are declared in fonts.css. Always use the variables below, never a family name.

     --font-display   headings, wordmark, big numbers, prices
     --font-body      everything else (inherited by buttons, inputs, tables)
     --font-mono      ids, codes, logs

   Big numbers: add class "num" (tabular) and, for hero figures, "num-display" (Inter Tight, tabular).
*/

:root{
  --font-display:"Inter Tight",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* fluid type scale. rem follows the app root size (app.css sets html to 14px/15px on desktop, 16px on phones).
     Body copy stays 16px (set in app.css); never go below --fs-sm for readable text on phones. */
  --fs-2xs:.6875rem;
  --fs-xs:.75rem;
  --fs-sm:.875rem;
  --fs-base:1rem;
  --fs-md:clamp(1.0625rem,1.02rem + .2vw,1.125rem);
  --fs-lg:clamp(1.125rem,1.06rem + .3vw,1.25rem);
  --fs-xl:clamp(1.25rem,1.12rem + .55vw,1.5rem);
  --fs-2xl:clamp(1.5rem,1.25rem + 1vw,2rem);
  --fs-3xl:clamp(1.75rem,1.35rem + 1.7vw,2.5rem);
  --fs-4xl:clamp(2rem,1.4rem + 2.6vw,3.5rem);
  --fs-5xl:clamp(2.5rem,1.5rem + 4.2vw,5rem);

  --lh-none:1;
  --lh-tight:1.08;
  --lh-snug:1.2;
  --lh-normal:1.5;
  --lh-relaxed:1.65;

  --ls-display:-.03em;    /* h1 and hero numbers */
  --ls-heading:-.022em;   /* h2 - h4 */
  --ls-body:0;
  --ls-caps:.08em;        /* uppercase eyebrows and table heads */

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-black:800;         /* display face only */
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

body{
  font-family:var(--font-body);letter-spacing:var(--ls-body);
  font-kerning:normal;font-variant-ligatures:common-ligatures;font-optical-sizing:auto;
}

/* ---------- headings ---------- */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-optical-sizing:auto;font-kerning:normal;color:var(--head);margin:0;text-wrap:balance}
h1{font-size:var(--fs-4xl);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--ls-display);word-spacing:.05em}
h2{font-size:var(--fs-xl);font-weight:var(--fw-bold);line-height:var(--lh-snug);letter-spacing:var(--ls-heading);word-spacing:.03em}
h3{font-size:var(--fs-md);font-weight:var(--fw-semibold);line-height:var(--lh-snug);letter-spacing:var(--ls-heading)}
h4{font-size:var(--fs-base);font-weight:var(--fw-semibold);line-height:var(--lh-snug);letter-spacing:-.012em}
h5,h6{font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:var(--lh-snug);letter-spacing:0}
p{text-wrap:pretty}

.muted{color:var(--muted)}
small{font-size:var(--fs-sm)}
.eyebrow{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted)}
code,kbd,samp,pre,.mono{font-family:var(--font-mono);font-size:.92em;font-variant-numeric:tabular-nums}

/* ---------- numbers: tabular everywhere money and counts are aligned ---------- */
.num,.tnum,table,.big-price,.hc-price,.ls-price,.mm-price,.sv-price,.tc-total,.dsh-kpi b,.mh-count,.mm-score,.of-nums{font-variant-numeric:tabular-nums lining-nums}
.num-display,.big-price,.dsh-kpi b,.mh-count b,.mm-score b,.tc-total b{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums}
.num-display{line-height:var(--lh-none)}
.display-xl{font-family:var(--font-display);font-size:var(--fs-5xl);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--ls-display);word-spacing:.05em;color:var(--head);text-wrap:balance}
.big-price{font-weight:var(--fw-black);letter-spacing:var(--ls-display)}
.hc-price,.ls-price,.mm-price,.sv-price{font-family:var(--font-display);font-weight:var(--fw-semibold);letter-spacing:-.02em}
.big-price small,.hc-price small,.ls-price small,.sv-price small{font-family:var(--font-body);letter-spacing:0;font-weight:var(--fw-medium)}
th{font-family:var(--font-body);font-weight:var(--fw-semibold)}

/* ---------- controls inherit the system ---------- */
button,input,select,textarea,optgroup{font-family:var(--font-body);letter-spacing:inherit}
.btn{font-family:var(--font-body);font-weight:var(--fw-semibold);letter-spacing:.003em;line-height:1.25}
.btn.primary{font-weight:var(--fw-bold)}
input::placeholder,textarea::placeholder{font-family:var(--font-body);font-weight:var(--fw-regular);opacity:.7}
label{font-weight:var(--fw-medium)}
@media (max-width:760px){
  /* 16px minimum stops iOS Safari zooming into focused fields */
  input,select,textarea{font-size:max(16px,1em)}
}

/* logo wordmark */
.logo-word{font-family:var(--font-display);letter-spacing:-.03em}
.logo-word b{font-weight:var(--fw-black)}
.logo-word small{font-family:var(--font-body);letter-spacing:0}