:root {
  --color-black: #000000;
  --color-body: #0a0a0a;
  --color-muted: #2e2e2e;
  --color-hairline: #cccccc;
  --color-surface: #f5f5f5;
  --color-white: #ffffff;
  --color-btn-primary-bg: #000000;
  --color-btn-primary-fg: #ffffff;

  --font-heading: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-numerals: "Inter", sans-serif;
  --font-stack-body: "T20 Numerals", var(--font-body), sans-serif;
  --font-stack-heading: "T20 Numerals", var(--font-heading), sans-serif;
  --font-regular: 400;
  --font-medium: 500;

  --text-xs: 11px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 24px;
  --text-xl: 32px;

  /* Kit reader fluid type — gentle with viewport; reading-safe floors */
  --kit-fs-2xs: clamp(0.625rem, 0.58rem + 0.22vw, 0.6875rem); /* ~10–11 */
  --kit-fs-xs: clamp(0.6875rem, 0.64rem + 0.28vw, 0.75rem); /* ~11–12 */
  --kit-fs-sm: clamp(0.75rem, 0.69rem + 0.32vw, 0.8125rem); /* ~12–13 */
  --kit-fs-md: clamp(0.8125rem, 0.74rem + 0.42vw, 0.9375rem); /* ~13–15 */
  --kit-fs-body: clamp(0.875rem, 0.78rem + 0.55vw, 1.0625rem); /* ~14–17 */
  --kit-fs-body-lg: clamp(0.9375rem, 0.84rem + 0.6vw, 1.125rem); /* ~15–18 */
  --kit-fs-title: clamp(1.0625rem, 0.92rem + 0.8vw, 1.3125rem); /* ~17–21 */
  --kit-fs-display: clamp(1.1875rem, 1rem + 1vw, 1.5rem); /* ~19–24 */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  --radius: 6px;
  --border-hairline: 0.5px solid var(--color-hairline);
  --content-max: 680px;
  --motion-duration: 200ms;

  /* App shell — pure white canvas (homepage, kit, library, Learn, marketing) */
  --shell-bg: #ffffff;
  --shell-frame-bg: #ffffff;
  --shell-card-bg: #ffffff;
  --shell-border: rgba(15, 15, 15, 0.08);
  --shell-shadow: 0 1px 2px rgba(15, 15, 15, 0.04), 0 4px 16px rgba(15, 15, 15, 0.03);
  --shell-gutter: var(--space-4);
  --shell-content-max: 1080px;
  /* Outline rhythm — shared by product detail, topbar, footer */
  --shell-chrome-fg: #0a0a0a;
  --shell-chrome-muted: #6b6b6b;
  /* Same adaptive hairline as kit content tiles (--kit-tile-hairline) */
  --shell-chrome-hairline: color-mix(in srgb, var(--shell-chrome-fg) 22%, transparent);
  --shell-chrome-label-size: 14px;
  --shell-chrome-body-size: 14px;
  --shell-chrome-label-lh: 1.5;
  --shell-chrome-body-lh: 1.65;
  --shell-chrome-tracking: -0.01em;
  --shell-chrome-item-gap: 0.75rem;
  --kit-font-tile-placement: #2c2c2c;
  --kit-font-tile-round: #2c2c2c;
  --kit-font-tile-section: #424242;
  --kit-font-content-heading: #2c2c2c;
  --kit-font-content-body: #2c2c2c;
  --kit-font-content-index: #2c2c2c;
  --topbar-bg: #ffffff;
  --topbar-border: #ebebeb;
  --footer-bg: #ffffff;
  --footer-border: #e0e0e0;
}

[data-theme="dark"] {
  --color-black: #ffffff;
  --color-body: #f2f2f2;
  --color-muted: #d4d4d4;
  --color-hairline: #444444;
  --color-surface: #111111;
  --color-white: #000000;
  --color-btn-primary-bg: #ffffff;
  --color-btn-primary-fg: #000000;

  --shell-bg: #161310;
  --shell-frame-bg: #161310;
  --shell-card-bg: #1c1916;
  --shell-border: rgba(255, 255, 255, 0.08);
  --shell-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
  --shell-chrome-fg: #ececec;
  --shell-chrome-muted: #9a9a9a;
  --shell-chrome-hairline: color-mix(in srgb, #ffffff 20%, transparent);
  --kit-font-tile-placement: #e8e8e8;
  --kit-font-tile-round: #e8e8e8;
  --kit-font-tile-section: #c8c8c8;
  --kit-font-content-heading: #e8e8e8;
  --kit-font-content-body: #d4d4d4;
  --kit-font-content-index: #c8c8c8;
}

/* Self-hosted Inter (SIL OFL) — avoids brittle Google Fonts CDN file hashes */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Digits and numeric punctuation always render in Inter (including inside headings) */
@font-face {
  font-family: "T20 Numerals";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  unicode-range:
    U+0030-0039,
    U+0024,
    U+0025,
    U+002B,
    U+002C,
    U+002D,
    U+002E,
    U+002F,
    U+003A,
    U+00A3,
    U+20AC;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html:not([data-theme="dark"]) {
  --shell-bg: #ffffff;
  --shell-frame-bg: #ffffff;
  --shell-card-bg: #ffffff;
  --topbar-bg: #ffffff;
  --footer-bg: #ffffff;
  --topbar-border: #ebebeb;
  --footer-border: #e0e0e0;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--shell-bg);
  color: var(--kit-font-content-body, var(--color-body));
  font-family: var(--font-stack-body);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
a,
summary,
[role="button"] {
  touch-action: manipulation;
}

@media (max-width: 640px) {
  :root {
    --shell-gutter: var(--space-3);
    --topbar-height: 48px;
  }

  /*
   * iOS Safari zooms the page when focused inputs are under 16px.
   * Keep visual scale with max(), without changing desktop type.
   */
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  select {
    font-size: max(16px, 1em);
  }
}

:is(
  h1,
  h2,
  h3:not(.kit-page__section-title),
  h4,
  h5,
  h6,
  .card__title,
  .hero__title,
  .hero__title-main,
  .modal__title,
  .site-footer__brand,
  .page-content h1,
  .page-content h2,
  .page-content h3
) {
  font-family: var(--font-stack-heading);
  font-weight: var(--font-medium);
  color: var(--color-black);
}

/* Popup / confirmation titles stay Inter only (no T20 numerals stack) */
.kit-modal__title {
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  color: var(--color-black);
}

:is(
  .offer-num,
  .feature-num,
  .pricing-hero__price,
  .pricing-card__num,
  .benefits-panel__price,
  .kit-includes__price,
  .kit-includes-strip__price,
  .product-detail__index,
  .question-block__number,
  .question-block__badge,
  .question-nav__label
) {
  font-family: var(--font-numerals);
  font-variant-numeric: tabular-nums;
}

.hero__title-sub {
  font-family: var(--font-body);
  font-weight: var(--font-regular);
  color: var(--color-body);
}

/* Tile subheadings inside kit panels use Inter body weight */
.kit-panel h3.kit-page__section-title {
  font-family: var(--font-body);
  font-weight: var(--font-regular);
  color: var(--color-black);
}

:is(
  p,
  li,
  label,
  input,
  textarea,
  .section-label,
  .input-label,
  .hero__subtitle,
  .feature-text,
  .card__meta,
  .question-block__text,
  .keywords li,
  .offer-card-text,
  .offer-subtitle,
  .offer-footer-text,
  .page-content p,
  .page-content li
) {
  font-family: var(--font-stack-body);
  color: var(--color-body);
}

.privacy-line,
.trust-line,
.card__trace {
  color: var(--color-muted);
}

h1,
h2,
h3,
p {
  margin: 0;
}

button:not(.btn--primary):not(.btn--ghost):not(.topbar__nav-link):not(.demo-kit-link):not(.theme-toggle):not(.kit-toast__action):not(.kit-modal__btn):not(.kit-restore-card__load):not(.chat-composer__submit):not(.kit-upload-strip__btn):not(.view-toggle__btn):not(.jump-strip__item):not(.section-download-menu__option):not(.kit-outlines-bridge__btn):not(.bookmark-wait-toast__btn):not(.bookmark-wait-toast__dismiss):not(.guide-hub__filter),
input:not(.kit-reveal-all__input),
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}