/* ==========================================================================
   Design tokens – Sellway landing
   Names mirror Figma Variables; "/" is replaced with "-"
   (e.g. font-size/h1 -> --font-size-h1).
   Size tokens are mobile-first: Mobile values in :root,
   Tablet (>= 768px) and Desktop (>= 1200px) modes override them below.
   ========================================================================== */

:root {
  /* ---------- Colors (same in every mode) ---------- */
  --theme-text: #1e1e1e;
  --theme-background: #ffffff;
  --brand-secondary: #e94112;
  --brand-secondary-light: #fffaf5;
  --button-primary-text: #ffffff;
  --button-primary-background: #1d4578;
  --button-primary-border: #1d4578;
  --button-secondary-text: #3a3a3a;
  --white: #ffffff;
  --medium-dark: #d3d3d3;
  --input-warning: #ff0000;

  /* ---------- Font families & weights ---------- */
  --primary-family: "Asap", Arial, sans-serif;
  --primary-bold: 700;      /* Figma: "Bold" */
  --secondary-family: "Lato", Arial, sans-serif;
  --secondary-regular: 400; /* Figma: "Regular" */
  --secondary-bold: 700;    /* Figma: "Bold" */

  /* text-main/* variables (used by the form input in Figma) */
  --text-main-font-family: "Lato", Arial, sans-serif;
  --text-main-font-weight: 400;
  --text-main-line-height: 26px;
  --text-main-letter-spacing: 0;

  /* ---------- Font sizes – Mobile ---------- */
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-text-large: 16px;
  --font-size-text-main: 14px;
  --font-size-text-small: 12px;
  --font-size-text-extra-small: 11px;

  /* ---------- Paddings – Mobile ---------- */
  --padding-horizontal-main: 20px;
  --padding-horizontal-large: 28px;
  --padding-horizontal-none: 0;
  --padding-vertical-main: 40px;
  --padding-vertical-small: 16px;
  --padding-vertical-extra-small: 16px;
  --padding-vertical-none: 0;

  /* ---------- Spacing – Mobile ---------- */
  --space-extra-small: 6px;
  --space-small: 16px;
  --space-medium: 24px; /* exists only in the Mobile mode */
  --space-large: 32px;
  --space-extra-large: 48px;

  /* ---------- Radii (same in every mode) ---------- */
  --radius-small: 5px;
  --radius-main: 10px;
  --radius-large: 20px;
}

/* ---------- Tablet mode ---------- */
@media (min-width: 768px) {
  :root {
    --font-size-h1: 48px;
    --font-size-h2: 28px;
    --font-size-text-large: 18px;
    --font-size-text-main: 16px;
    --font-size-text-small: 13px;
    --font-size-text-extra-small: 11px;

    --padding-horizontal-main: 40px;
    --padding-horizontal-large: 56px;
    --padding-vertical-main: 64px;
    --padding-vertical-small: 24px;
    --padding-vertical-extra-small: 24px;

    --space-extra-small: 9px;
    --space-small: 24px;
    --space-large: 48px;
    --space-extra-large: 64px;
  }
}

/* ---------- Desktop mode ---------- */
@media (min-width: 1200px) {
  :root {
    --font-size-h1: 52px;
    --font-size-h2: 36px;
    --font-size-text-large: 20px;
    --font-size-text-main: 18px;
    --font-size-text-small: 14px;
    --font-size-text-extra-small: 12px;

    --padding-horizontal-main: 56px;
    --padding-horizontal-large: 96px;
    --padding-vertical-main: 96px;
    --padding-vertical-small: 48px;
    --padding-vertical-extra-small: 32px;

    --space-extra-small: 12px;
    --space-small: 28px;
    --space-large: 64px;
    --space-extra-large: 96px;
  }
}

/* ==========================================================================
   Local tokens – not from Figma Variables
   Values hard-coded in the Figma layers (not bound to variables),
   collected here so styles.css never uses raw values.
   ========================================================================== */

:root {
  /* Page */
  --page-max-width: 1440px;
  --scroll-margin-top: 24px;  --paragraph-spacing: 1.45em; /* empty line between paragraphs = 1 line of text */

  /* Text style metrics (Figma percentages -> unitless / em) */
  --line-height-heading: 1.1;
  --line-height-text: 1.45;
  --letter-spacing-heading: -0.01em; /* -1% */
  --font-size-step-title: 24px;
  --line-height-step-title: 1.2;
  --font-size-field-label: 16px;
  --line-height-field-label: 1.5; /* 24px / 16px */
  --font-size-field-input: 16px;

  /* Gaps */
  --gap-5: 5px;
  --gap-7: 7px;
  --gap-10: 10px;
  --gap-15: 15px;
  --gap-20: 20px;
  --gap-30: 30px;
  --gap-35: 35px;
  --gap-40: 40px;
  --gap-60: 60px;
  --gap-80: 80px;

  /* Components */
  --button-height: 56px;
  --button-height-large: 60px;
  --button-padding-x: 24px;
  --button-padding-y: 16px;
  --button-border-width: 1.5px;
  --button-hover-opacity: 0.9;
  --border-width: 1px;
  --focus-ring-width: 2px;
  --offer-padding-x: 20px;
  --offer-padding-y: 10px;
  --input-height: 48px;
  --input-padding: 10px;
  --checkbox-size: 29px;
  --checkbox-border: #ebebeb;
  --icon-size: 24px;
  --issue-icon-size: 19px;
  --toggle-size: 19px;
  --step-indent: 40px;
  --faq-item-padding-x: 30px;
  --faq-item-padding-y: 20px;
  --faq-intro-width: 343px;
  --form-heading-padding-bottom: 20px;
  --faq-duration: 350ms; /* FAQ open/close (also read by js/faq.js) */

  /* Mobile sticky CTA bar */
  --sticky-cta-padding: 12px;
  --sticky-cta-shadow: 0 -4px 16px rgba(30, 30, 30, 0.08); /* theme-text at 8% */
  --sticky-cta-duration: 250ms;
  /* Full bar height: button + top/bottom padding + iPhone home-indicator area */
  --sticky-cta-height: calc(var(--button-height-large) + 2 * var(--sticky-cta-padding) + env(safe-area-inset-bottom, 0px));

  /* Media sizes (Figma frame sizes) */
  --brand-width: 306px;
  --partner-logo-width-mobile: 129px;
  --partner-logo-width: 201.69px;
  --form-partner-logo-width: 102.5px;
  --hero-preview-width: 594px;
  --inquiry-preview-width: 471px;
  --mice-preview-width: 504px;
  --trial-steps-width: 706px;
  --trial-form-width: 558px;
  --thanks-text-max-width: 706px; /* thank-you page, not in Figma – matches trial__steps width */

  /* Clients logos */
  --logo-opacity: 0.5;
}