/* 26Keys theme: every shared design value. Change values here, not in component rules. */
:root {
  /* Typography: one source of truth; values intentionally match the current UI. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  /* One display weight for the hero, section titles, and feature card
     headings. Standard 600 renders identically on every platform. */
  --weight-display: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-none: 1;
  --leading-display: 1.05;
  --leading-body: 1.5;
  --leading-relaxed: 1.55;
  --leading-loose: 1.6;
  --tracking-display: -.03em;
  --tracking-heading: -.028em;
  --tracking-tight: -.02em;
  --tracking-subtle: -.01em;
  --tracking-label: .13em;
  --tracking-label-compact: .12em;

  /* Fixed type primitives used by compact UI, body copy, and mockups.
     Whole-pixel steps only: the old half-px sizes read identically. */
  --fs-9: 9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-21: 21px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-25: 25px;
  --fs-26: 26px;
  --fs-30: 30px;
  --fs-32: 32px;
  --fs-34: 34px;
  --fs-44: 44px;
  --fs-46: 46px;
  --fs-relative-small: .62em;

  /* Fluid display type. Names describe the role, not a particular viewport. */
  --fs-key: clamp(9px, 2.3cqw, 20px);
  --fs-key-toast: clamp(10px, 1.5cqw, 14px);
  --fs-list-large: clamp(24px, 2.4vw, 32px);
  --fs-compare-note: clamp(26px, 3vw, 40px);
  /* Every section title shares this one size; only the hero goes bigger.
     At a 1440px desktop: hero 72, titles 56. On phones both settle at 34. */
  --fs-h2: clamp(34px, 3.9vw, 56px);
  --fs-hero: clamp(42px, 5vw, 72px);
  --fs-price: clamp(58px, 5.2vw, 70px);
  --fs-footer: clamp(88px, 13vw, 190px);
  --fs-hero-mobile: clamp(28px, 8.8vw, 42px);
  --fs-price-mobile: clamp(54px, 17vw, 68px);
  --fs-footer-mobile: clamp(34px, 12vw, 50px);

  /* Core color system. Component-only and third-party brand colors stay local. */
  --ink: #0e0e0e;
  --ink-soft: #2b2b2b;
  --muted: #8a8a8a;
  --line: #e8e8e6;
  --bg: #ffffff;
  --wash: #f4f4f2;
  --accent: #006adb;
  --black: #000;
  --white: #fff;
  --text-body: #666;
  --text-body-soft: #686868;
  --text-body-strong: #555;
  --text-subtle: #a3a3a3;
  --text-on-dark-muted: #929292;
  --text-on-dark-muted-2: #8f8f8f;
  --text-on-dark-soft: #a7a7a7;
  --surface-chip: #f0f0ee;
  --surface-dark-card: #161616;
  --accent-bright: #4d9bff;
  --error: #e5484d;

  /* Shared borders, elevation, and motion. */
  --border-subtle: 1px solid var(--line);
  --shadow-button-hover: 0 10px 24px rgba(0,0,0,.16);
  --shadow-floating: 0 18px 40px rgba(0,0,0,.22);
  --ring-accent: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  --ease-standard: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-overshoot: cubic-bezier(.22,1.2,.36,1);
  --ease-smooth: cubic-bezier(.2,.75,.2,1);

  /* Reusable geometry. */
  --content-max: 1240px;
  --page-gutter: 96px;
  --page-gutter-tablet: 48px;
  --page-gutter-mobile: 44px;
  --section-space: 128px;
  --section-space-viewport: 96px;
  --section-space-mobile: 76px;
  --radius-5: 5px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-24: 24px;
  --radius-30: 30px;
  --radius-pill: 999px;
}