/* Square Bracket Ads design tokens. Every color, type setting, space, radius, shadow and
   easing lives here; styles.css uses only these names. One committed theme: light.
   The page is a bright product surface on purpose (the brand reads as a clear receipt),
   so it does not flip to dark; color-scheme keeps form controls light to match. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url(/assets/fonts/bricolage-grotesque.woff2) format("woff2");
  font-weight: 400 800;
  font-stretch: 80% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url(/assets/fonts/geist-mono.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks so the swap does not move the layout. */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial");
  size-adjust: 103%;
  ascent-override: 90%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Consolas"), local("Menlo"), local("Courier New");
  size-adjust: 109%;
  ascent-override: 92%;
  descent-override: 27%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* Ground and ink (tinted, never pure black or white) */
  --paper: #F5F6F1;
  --paper-2: #ECEFE7;
  --card: #FDFDFA;
  --card-2: #FAFBF8;
  --ink: #0F1D17;
  --ink-2: #3A4842;
  --muted: #5B6862;
  --line: #DCE2D8;
  --line-2: #E8ECE4;

  /* The one loud accent: the mark's green */
  --green: #2FD07A;
  --green-2: #1FB866;
  --green-hi: #3BDB86;
  --green-ink: #0A6B3B;
  --mint: #DDF4E5;
  --ad-bg: #F4FAF6;

  /* Soft fields behind product screens */
  --sky: #E2ECF8;
  --sky-2: #DFE7F2;
  --sky-ink: #1C4F8A;
  --butter: #F8EECB;
  --butter-ink: #6B4F05;
  --peach: #FBE4D8;
  --coral-ink: #A63A27;
  --clay: #F6E3D3;
  --clay-ink: #7A3E14;

  /* Deep field */
  --deep: #0C271E;
  --on-deep: #EAF3EC;
  --on-deep-2: #A9C2B5;

  /* Translucent tints */
  --glass: rgba(245, 246, 241, 0.82);
  --ghost: rgba(253, 253, 250, 0.6);
  --hair: rgba(15, 29, 23, 0.06);
  --hair-2: rgba(15, 29, 23, 0.1);
  --strike: rgba(91, 104, 98, 0.5);
  --green-ring: rgba(47, 208, 122, 0.2);
  --deep-glow: rgba(47, 208, 122, 0.18);
  --deep-glow-2: rgba(47, 208, 122, 0.1);
  --deep-rule: rgba(169, 194, 181, 0.35);
  --wash-green: rgba(47, 208, 122, 0.2);
  --wash-butter: rgba(248, 226, 150, 0.55);
  --wash-sky: rgba(160, 196, 240, 0.45);
  --btn-inset: inset 0 -2px 0 rgba(10, 80, 45, 0.25);
  --btn-glow: 0 8px 20px -8px rgba(31, 184, 102, 0.7);
  --btn-glow-hi: 0 14px 28px -10px rgba(31, 184, 102, 0.8);

  /* Shadows, tinted green-black */
  --sh-1: 0 1px 1px rgba(16, 48, 34, 0.05), 0 2px 6px -2px rgba(16, 48, 34, 0.08);
  --sh-2: 0 1px 2px rgba(16, 48, 34, 0.06), 0 10px 24px -8px rgba(16, 60, 40, 0.16), 0 32px 64px -28px rgba(16, 60, 40, 0.22);
  --sh-3: 0 2px 4px rgba(16, 48, 34, 0.06), 0 24px 48px -16px rgba(16, 60, 40, 0.26), 0 60px 120px -40px rgba(16, 70, 45, 0.3);
  --sh-bar: 0 18px 36px -12px rgba(10, 40, 25, 0.45);

  /* Type */
  --sans: "Bricolage Grotesque", "Bricolage Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, Menlo, Consolas, monospace;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-fine: 14px;
  --fs-label: 12.5px;
  --fs-lede: clamp(17px, 1.35vw, 20px);
  --fs-h1: clamp(42px, 9.6vw, 78px);
  --fs-h1-wide: clamp(56px, 5.7vw, 88px);
  --fs-h1-page: clamp(40px, calc(4vw + 22px), 80px);
  --fs-h2: clamp(34px, calc(3vw + 18px), 64px);
  --fs-h3: clamp(21px, 1.7vw, 25px);
  --fs-h3-field: clamp(26px, 2.4vw, 36px);
  --fs-stat: clamp(120px, 19vw, 260px);
  --fs-final: clamp(42px, 6.6vw, 104px);
  --track-display: -0.032em;
  --track-head: -0.025em;
  --track-label: 0.06em;
  --lh-body: 1.55;
  --lh-display: 0.96;
  --lh-head: 1.02;

  /* Space and layout */
  --gut: clamp(16px, 4vw, 48px);
  --wrap: 1280px;
  --measure: 68ch;
  --sec: clamp(72px, 10vw, 140px);
  --sec-tight: clamp(48px, 6vw, 88px);
  --header-h: 68px;
  --tap: 44px;

  /* Shape */
  --r-xl: 28px;
  --r-l: 20px;
  --r-m: 14px;
  --r-s: 10px;
  --r-pill: 999px;

  /* Motion: one curve, everywhere */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.3s;
  --dur: 0.9s;
  --dur-slow: 1.4s;
}