/* Lassso — Colors & Type tokens
   Extracted directly from the Slow Seats / Lassso Figma source.
   Primary brand mark uses a saturated blue accent; the surface
   palette is warm-neutral (off-white, stone) with deep ink text.
*/

@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
/* Until Semibold is added, map 600 → Medium so plain copy and digits resolve to the same face. */
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-Medium.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

:root {
  /* === Neutral / Stone scale (warm) — canonical 50–900 === */
  --stone-50:  #f7f7f2;   /* page bg accent (247,247,242) */
  --stone-100: #efefe8;   /* hairlines + chip bg (239,239,232) */
  --stone-200: #d0d0ca;   /* image fallback / muted (208,208,202) */
  --stone-300: #b3b3ad;   /* placeholder icon stroke (179,179,173) */
  --stone-400: #969691;   /* placeholder text (150,150,145) */
  --stone-500: #7a7b77;   /* secondary label (122,123,119) */
  --stone-600: #60605d;   /* body muted (96,96,93) */
  --stone-700: #464644;   /* body (70,70,68) */
  --stone-800: #2e2e2d;   /* strong body (46,46,45) */
  --stone-900: #181817;   /* ink / display (24,24,23) */
  --stone-150: var(--stone-100); /* legacy alias */
  --white:     #ffffff;
  --black:     #000000;

  /* === Brand blue (CTA / link) — full 100–900 scale === */
  --blue-100:  #e4f0ff;   /* (228,240,255) */
  --blue-200:  #c0dafe;   /* (192,218,254) */
  --blue-300:  #9bc5fd;   /* (155,197,253) */
  --blue-400:  #74affe;   /* (116,175,254) */
  --blue-500:  #4998fd;   /* (73,152,253) */
  --blue-600:  #0c7ffa;   /* PRIMARY CTA (12,127,250) */
  --blue-700:  #076cd6;   /* link / on-light (7,108,214) */
  --blue-800:  #0559b3;   /* (5,89,179) */
  --blue-900:  #034791;   /* (3,71,145) */
  /* legacy aliases (kept so existing markup keeps working) */
  --blue-50:   var(--blue-100);

  /* === Mint / Success scale (handwritten emphasis + status) === */
  --green-50:  #eef9f3;   /* soft mint wash (nurture icons, chips — pairs with blue-100 / pink-100) */
  --green-100: #c5fde5;   /* highlight pill bg (197,253,229) */
  --green-200: #49fac2;   /* (73,250,194) */
  --green-300: #40e1ae;   /* (64,225,174) */
  --green-400: #38c89b;   /* (56,200,155) */
  --green-500: #30b088;   /* status dot (48,176,136) */
  --green-600: #299975;   /* (41,153,117) */
  --green-700: #218263;   /* (33,130,99) */
  --green-800: #1a6c52;   /* (26,108,82) */
  --green-900: #135641;   /* highlight ink (19,86,65) */
  /* Mint / success aliases (teal-leaning — prefer over raw green-* for status dots) */
  --success-500: var(--green-500);
  --success-600: var(--green-600);

  /* === Accents (used sparingly) === */
  --purple-100:  #ede9fd; /* email / nurture wash */
  --purple-200:  #eeecfd;  /* (238,236,253) */
  --purple-300:  #8962f5;  /* (137,98,245) */
  --purple-500:  #7e5af0;
  --purple-600:  #6b44d4;
  --orange-500: #fc8b2c;  /* (252,139,44) */
  --warning-500: #e88f1f; /* WARNING_500 — hsl(30 82% 49%) */
  --pink-100:    #fce7f3; /* Instagram / social wash */
  --pink-500:    #db4592; /* social icon 500 */
  --pink-600:    #c13584; /* social / Instagram accent 600 */
  --red-500:    #ea2f2f;  /* (234,47,47) — Rectangle26 */

  /* === Semantic === */
  --bg:           var(--white);
  --bg-soft:      var(--stone-50);
  --bg-chip:      var(--stone-100);
  --fg:           var(--stone-900);
  --fg-strong:    var(--stone-900);
  --fg-body:      var(--stone-700);
  --fg-muted:     var(--stone-600);
  --fg-subtle:    var(--stone-500);
  --fg-faint:     var(--stone-400);
  --fg-on-blue:   #ffffff;
  --hairline:     var(--stone-100);
  --border:       var(--stone-100);
  --link:         var(--blue-700);
  --accent:       var(--blue-600);
  --accent-soft:  var(--blue-100);
  --accent-ink:   var(--blue-700);
  --highlight-bg: var(--green-100);
  --highlight-fg: var(--green-900);

  /* === Type families === */
  --font-display: "Suisse Intl", "Suisse Int'l", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script:  "Caveat", "Cute Cat", "Bradley Hand", cursive; /* handwritten accent */

  /* === Type scale (matches Figma exactly) === */
  --fs-display-xl: 57px;  /* hero (line-height 62) */
  --fs-display-l:  42px;  /* section title (line-height 45) */
  --fs-display-m:  36px;  /* h3 — between display-l (42) and prior 32 */
  --lh-display-m:  38.5px; /* ~1.07×, same proportion as display-l (45/42) */
  --fs-display-s:  28px;  /* popup title */
  --fs-h:          20px;  /* card title / form group title */
  --fs-body-l:     18px;  /* FAQ row / lead body */
  --fs-body:       16px;  /* default body */
  --fs-body-s:     14px;  /* nav, button, table */
  --fs-caption:    12px;  /* chip, label */
  --fs-tiny:       10px;

  /* line-heights */
  --lh-tight: 1.0;
  --lh-snug:  1.07;       /* 17.9/14 ~ 1.28; display 45/42 ~ 1.07 */
  --lh-body:  1.5;

  /* tracking */
  --tracking-display: -0.01em;   /* hero -0.01 */
  --tracking-script:  -0.03em;

  /* === Radii === */
  --radius-xs: 3px;
  --radius-s:  4px;
  --radius-m:  8px;
  --radius-l:  12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* === Spacing (8-grid) === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-22: 88px;
  --space-28: 112px;

  /* === Shadows (canonical — only these five) === */
  --shadow-sm:       0 1px 1px 0 rgba(0,0,0,.08), 0 0 0 1px #EFEFE8;
  --shadow-md:       0 1px 1px 0 rgba(0,0,0,.08), 0 4px 8px -3px rgba(0,0,0,.06), 0 0 0 1px #EFEFE8;
  --shadow-lg:       0 1px 1px 0 rgba(0,0,0,.08), 0 4px 8px -3px rgba(0,0,0,.06), 0 7px 28px -7px rgba(0,0,0,.04), 0 0 0 1px #EFEFE8;
  --shadow-xl:       0 1px 1px 0 rgba(0,0,0,.08), 0 4px 8px -3px rgba(0,0,0,.06), 0 7px 28px -7px rgba(0,0,0,.04), 0 12px 54px -15px rgba(0,0,0,.10), 0 0 0 1px #EFEFE8;
  --shadow-selected: 0 1px 1px 0 rgba(0,0,0,.08), 0 4px 8px -3px rgba(0,0,0,.06), 0 0 0 1px #0C7FFA, 0 0 0 4px #E4F0FF;
  /* Legacy aliases */
  --shadow-card:        var(--shadow-md);
  --shadow-input:       var(--shadow-sm);
  --shadow-input-focus: var(--shadow-selected);
  --shadow-button:      var(--shadow-sm);
  --shadow-hairline:    0 0 0 1px var(--hairline);
  --shadow-card-1:      var(--shadow-sm);
  --shadow-card-2:      var(--shadow-md);
  --shadow-card-3:      var(--shadow-xl);
  --shadow-focus-blue:  var(--shadow-selected);
}

/* ==== Semantic tags ==== */
html, body { background: var(--bg); color: var(--fg); }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-xl);
  line-height: 62px;
  letter-spacing: var(--tracking-display);
  color: var(--fg-strong);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-l);
  line-height: 45px;
  color: var(--fg-strong);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-m);
  line-height: var(--lh-display-m);
  letter-spacing: var(--tracking-display);
  color: var(--fg-strong);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-s);
  line-height: 1;
  color: var(--fg-strong);
  margin: 0;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: 0;
  color: var(--fg-muted);
}
p, .body { color: var(--fg-muted); font-size: var(--fs-body); line-height: 1; }
.body-l { font-size: var(--fs-body-l); }
.label { font-size: var(--fs-caption); color: var(--fg-subtle); }
a { color: var(--link); text-decoration: none; }
.script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: var(--tracking-script);
  color: var(--highlight-fg);
}
.highlight {
  background: var(--highlight-bg);
  color: var(--highlight-fg);
  border-radius: var(--radius-m);
  padding: 0 4px;
}

/* HubSpot Odometer — only visible during the roll animation; settled stats use .lassso-stat-value-glyph. */
.lassso-odometer.odometer.odometer-theme-default,
.lassso-odometer.odometer.odometer-auto-theme {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  vertical-align: baseline;
}
.lassso-odometer .odometer-digit,
.lassso-odometer .odometer-digit .odometer-value,
.lassso-odometer .odometer-digit .odometer-digit-spacer {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: inherit;
}
.lassso-odometer .odometer-digit .odometer-digit-inner {
  line-height: inherit;
}
.lassso-odometer.odometer.odometer-theme-default .odometer-value,
.lassso-odometer.odometer.odometer-auto-theme .odometer-value {
  text-align: inherit;
}
/** Plain stat glyphs — Custom, $ prefix, and post-roll prices share one rendering path. */
.lassso-stat-value-glyph {
  display: inline-block;
  font-family: inherit;
  font-weight: 600;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  line-height: 1;
}
/* Slide speed (theme hardcodes 2s). Keep in sync with ODOMETER_COUNT_DURATION_MS. */
.lassso-odometer .odometer-ribbon-inner {
  -webkit-transition-duration: 1s !important;
  transition-duration: 1s !important;
}