/* UpscaleInfo design tokens (2026-10-11).
   Layout, colour, space and motion were measured on the inspiration site (avero.framer.media) in a real
   browser at 1440, 1024 and 390 px. The type (fonts, weights, sizes, line heights, letter spacing and the
   headline gradient) was measured the same way on Carl's type reference (consulting-bussines-template.framer.website).
   See README.md "Design system". Three layers: primitives, then semantic roles, then component tokens.
   Change the look here, never in main.css. */

/* ---------- 1. Fonts (self-hosted, unmodified Google Fonts latin files; OFL licences in fonts/licenses/) ---------- */
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks so the swap does not move anything. Computed 2026-10-11 from the font files
   (hhea metrics, and the advance width of a line of site copy against the fallback). */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  size-adjust: 111.36%;
  ascent-override: 94.29%;
  descent-override: 31.43%;
  line-gap-override: 8.98%;
}
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 500;
  size-adjust: 112.46%;
  ascent-override: 93.37%;
  descent-override: 31.12%;
  line-gap-override: 8.89%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  size-adjust: 107.62%;
  ascent-override: 90.01%;
  descent-override: 22.41%;
  line-gap-override: 0%;
}

:root {
  /* ---------- 2. Primitives ---------- */
  --black: #000101;
  --ink-shell: #040309;
  --ink-card: #09090b;
  --ink-line: #18181b;
  --ink-line-strong: #27272a;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-muted: #7a7a83; /* inspo #71717a nudged for 4.5:1 on black and on cards */
  --white: #ffffff;
  --violet: #7c39fe;
  --lime: #b3fc6a;

  --lavender-100: #e4e5f2;

  /* Poppins for headings, Inter for everything else (as on the type reference). */
  --font-display: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Springs, precomputed from the inspo's Framer configs (stiffness/damping/mass) as linear() curves.
     The fallback (below) is the closest cubic-bezier; the springs are overdamped, so it looks the same. */
  --ease-appear: cubic-bezier(0.2, 0.9, 0.3, 1);        /* 150/30/1 */
  --ease-firm: cubic-bezier(0.18, 0.9, 0.3, 1);         /* 200/40/1 */
  --ease-letter-h1: cubic-bezier(0.25, 0.85, 0.35, 1);  /* 625/50/1, critically damped */
  --ease-letter-accent: cubic-bezier(0.2, 0.9, 0.3, 1); /* 140/28/1 */
  --ease-letter-h2: cubic-bezier(0.3, 0.7, 0.35, 1);    /* 100/20/1, critically damped */
  --ease-menu: cubic-bezier(0.2, 0.9, 0.3, 1);          /* 250/40/1 */
  --ease-hover: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ---------- 3. Semantic roles ---------- */
  --bg: var(--black);
  --surface-shell: var(--ink-shell);
  --surface-card: var(--ink-card);
  --line: var(--ink-line);
  --line-strong: var(--ink-line-strong);
  --text: var(--white);
  --text-quote: var(--zinc-200);
  --text-2: var(--zinc-300);
  --text-muted: var(--zinc-muted);
  --accent: var(--violet);
  --accent-hover: var(--lime);
  --on-light: var(--ink-card);

  /* Type scale, phone first (<810). Tablet and desktop override below. */
  --fs-h1: 38px;    --lh-h1: 1.1;
  --fs-h2: 32px;    --lh-h2: 1.2;
  --fs-h3: 24px;    --lh-h3: 1.3;
  --fs-quote: 32px; --lh-quote: 1.3;
  --fs-faq: 20px;   --lh-faq: 1.5;
  --fs-lead: 18px;  --lh-lead: 1.5;
  --fs-body: 16px;  --lh-body: 1.5;
  --fs-small: 14px; --lh-small: 1.5;
  --fs-strip: 18px; --lh-strip: 1.5;
  --fs-name: 26px;
  --weight-h1: 500;
  --weight-h2: 400;
  --weight-h3: 500;
  --track-h1: -0.04em;
  --track-h3: -0.02em;
  /* The hero headline's second line ("to cash [tile] collected.") is 9.24em wide in Poppins; below 390 px
     the headline shrinks just enough to keep it on one line. */
  --h1-fit: calc((100vw - 2 * var(--gutter)) / 9.4);
  /* Headline fill: the type reference's 142deg fade (#e4e5f2 to 30% of itself). The faint end is raised
     to keep every letter at 3:1 or more over the violet glow (qa/contrast.py). */
  --grad-h1: linear-gradient(142deg, var(--lavender-100) 38.83%, rgba(228, 229, 242, 0.55) 92.06%);

  /* Space and layout */
  --gutter: 16px;
  --section: 64px;
  --head-gap: 48px;
  --hero-top: 136px;
  --hero-bottom: 64px;
  --hero-gap: 56px;
  --w-nav: 840px;
  --w-grid: 1200px;
  --w-steps: 1000px;
  --w-faq: 880px;
  --w-footer: 1100px;
  --w-cta: 1000px;
  --w-booking: 740px; /* Calendly's card is 680px wide on desktop, with the times beside the calendar */
  --w-copy: 560px;

  /* Shape */
  --r-nav: 48px;
  --r-btn: 36px;
  --r-shell: 32px;
  --r-lg: 24px;
  --r-md: 20px;
  --r-row: 16px;
  --r-icon: 12px;
  --pad-shell: 12px;
  --pad-card: 24px;

  /* Motion */
  --dur-appear: 1040ms;
  --dur-letter-h1: 350ms;
  --dur-letter-accent: 1020ms;
  --dur-letter-h2: 850ms;
  --dur-menu: 840ms;
  --dur-hover: 250ms;
  --rise-appear: 16px;
  --rise-letter: 10px;
  --blur-letter: 10px;
  --stagger-h1: 50ms;
  --stagger-accent: 100ms;
  --stagger-h2: 27ms;
  --ticker-speed: 60; /* px per second */

  /* ---------- 4. Component tokens ---------- */
  --nav-h: 72px;
  --nav-glass: rgba(0, 0, 0, 0.26); /* inspo 0.12; darker so white links keep 4.5:1 over the brightest glow */
  --nav-glass-solid: rgba(9, 9, 11, 0.92);
  --nav-ring: rgba(230, 230, 232, 0.3);
  --nav-blur: 20px;
  --chip-glass: rgba(255, 255, 255, 0.1);
  --chip-ring: rgba(255, 255, 255, 0.14);
  --btn-h: 46px;
  --btn-ring: rgba(255, 255, 255, 0.15);
  --btn-hover-violet: 0.8;
  --btn-hover-white: 0.6;
  --panel-ring: rgba(216, 216, 223, 0.08);
  --stack-top-1: 80px;
  --stack-top-2: 100px;
  --stack-top-3: 120px;
}

/* linear() springs where supported (Chrome 113+, Safari 17.2+, Firefox 112+). */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-appear: linear(0, 0.08, 0.224, 0.37, 0.498, 0.603, 0.687, 0.754, 0.807, 0.849, 0.881, 0.907, 0.927, 0.943, 0.955, 0.965, 0.972, 0.978, 0.983, 0.987, 0.99, 0.992, 0.994, 0.995, 0.996, 0.997, 0.998, 1);
    --ease-firm: linear(0, 0.103, 0.266, 0.416, 0.537, 0.635, 0.712, 0.774, 0.821, 0.859, 0.889, 0.913, 0.931, 0.946, 0.957, 0.966, 0.973, 0.979, 0.983, 0.987, 0.99, 0.992, 0.994, 0.995, 0.996, 0.997, 0.998, 1);
    --ease-letter-h1: linear(0, 0.045, 0.142, 0.259, 0.377, 0.487, 0.583, 0.666, 0.734, 0.79, 0.836, 0.872, 0.901, 0.923, 0.94, 0.954, 0.965, 0.973, 0.98, 0.984, 0.988, 0.991, 0.993, 0.995, 0.996, 0.997, 0.998, 1);
    --ease-letter-accent: linear(0, 0.073, 0.212, 0.355, 0.483, 0.59, 0.677, 0.746, 0.801, 0.844, 0.878, 0.905, 0.925, 0.942, 0.954, 0.964, 0.972, 0.978, 0.983, 0.987, 0.99, 0.992, 0.994, 0.995, 0.996, 0.997, 0.998, 1);
    --ease-letter-h2: linear(0, 0.041, 0.133, 0.246, 0.36, 0.468, 0.565, 0.648, 0.717, 0.775, 0.822, 0.86, 0.891, 0.915, 0.934, 0.949, 0.961, 0.97, 0.977, 0.982, 0.986, 0.99, 0.992, 0.994, 0.995, 0.997, 0.997, 1);
    --ease-menu: linear(0, 0.085, 0.233, 0.38, 0.506, 0.61, 0.693, 0.758, 0.809, 0.85, 0.882, 0.907, 0.927, 0.943, 0.955, 0.965, 0.972, 0.978, 0.983, 0.986, 0.989, 0.992, 0.993, 0.995, 0.996, 0.997, 0.997, 1);
  }
}

/* Tablet (810-1199). */
@media (min-width: 810px) {
  :root {
    --fs-h1: 54px;
    --fs-h2: 42px;
    --fs-quote: 42px;
    --fs-name: 30px;
    --gutter: 24px;
    --head-gap: 64px;
    --hero-top: 160px;
    --hero-gap: 72px;
    --nav-h: 64px;
    --stack-top-1: 120px;
    --stack-top-2: 140px;
    --stack-top-3: 160px;
  }
}

/* Desktop (1200+). */
@media (min-width: 1200px) {
  :root {
    --fs-h1: 68px;
    --fs-h2: 52px;
    --fs-quote: 52px;
    --fs-name: 34px;
    --gutter: 64px;
    --section: 120px;
    --head-gap: 80px;
  }
}