/* Mobile design tokens. All rules must stay inside max-width 768 + html.tvl-mobile. */
@media (max-width: 768px) {
  html.tvl-mobile {
    --tvl-m-primary: #f9363d;
    --tvl-m-ink: #1e1e1e;
    --tvl-m-light: #f6f6f6;
    --tvl-m-font: Helvetica, "Helvetica Neue", Arial, sans-serif;
    --tvl-m-font-light: "Helvetica Light", Helvetica, Arial, sans-serif;
    --tvl-m-display: clamp(32px, 8.5vw, 38px);
    --tvl-m-h2: clamp(24px, 6.2vw, 28px);
    --tvl-m-h3: clamp(18px, 4.8vw, 22px);
    --tvl-m-body: clamp(15px, 3.9vw, 16px);
    --tvl-m-label: clamp(12px, 3.1vw, 13px);
    --tvl-m-caption: clamp(11px, 2.8vw, 12px);
    --tvl-m-lh-display: 1.15;
    --tvl-m-lh-h2: 1.25;
    --tvl-m-lh-h3: 1.3;
    --tvl-m-lh-body: 1.5;
    --tvl-m-lh-label: 1.35;
    --tvl-heading: var(--tvl-m-display);
    --tvl-subhead: var(--tvl-m-h2);
    --tvl-body: var(--tvl-m-body);
    --tvl-m-gutter: 20px;
    --tvl-m-section: clamp(56px, 10vw, 72px);
    --tvl-m-radius: 12px;
    --tvl-m-safe-top: env(safe-area-inset-top, 0px);
    --tvl-m-safe-bottom: env(safe-area-inset-bottom, 0px);
  }
}
@media (min-width: 430px) and (max-width: 768px) {
  html.tvl-mobile {
    --tvl-m-gutter: 24px;
  }
}