/* ============================================================
   Trackstar design system — one source of truth for type,
   spacing, radius, color, and buttons across every section.
   Loaded globally from layout/theme.liquid. Sections consume
   these tokens via var(--ts-*) instead of hardcoding values.
   ============================================================ */

:root{
  /* color */
  --ts-purple:#4600D6;
  --ts-purple-hover:#3A00B0;
  --ts-ink:#1E1E1E;       /* warm near-black for footer + dark accent cards */
  --ts-white:#FFFFFF;
  --ts-gray:#F6F5F2;      /* warm light-gray panel surface (Onside-matched) */
  --ts-text:#000000;
  --ts-muted:#666666;
  --ts-border:#E0E0E0;

  /* radius */
  --ts-r-control:8px;     /* buttons + inputs (matches the wizard) */
  --ts-r-card:8px;        /* cards, media, video, images */
  --ts-r-pill:999px;      /* filter chips only */

  /* type */
  --ts-font:Helvetica,'Helvetica Neue',Arial,sans-serif;
  --ts-tracking:-0.04em;

  /* mobile-first type scale. Every section title (trackstar-built AND native)
     resolves to this one token, so they are always identical. */
  --ts-title:36px;
  --ts-title-lh:1.1;
  --ts-subhead:18px;
  --ts-body:16px;
  --ts-eyebrow:12px;

  /* mobile-first spacing */
  --ts-section-pad:48px;  /* section top & bottom */
  --ts-title-gap:16px;    /* title -> content */
  --ts-gutter:16px;       /* side padding */
  --ts-container:1120px;  /* max content width */

  /* alternating "panel" surface (Onside-style rounded card that spans the section) */
  --ts-panel-radius:18px;
  --ts-panel-inset:8px;   /* small side margin of the card from the viewport */
  --ts-carousel-gap:8px; /* consistent gap between carousel items */
}

@media (min-width:750px){
  :root{
    --ts-title:52px;
    --ts-title-lh:1.05;
    --ts-subhead:24px;
    --ts-body:18px;

    --ts-section-pad:80px;
    --ts-title-gap:24px;
    --ts-gutter:24px;

    --ts-panel-radius:24px;
    --ts-panel-inset:16px;
    --ts-carousel-gap:10px;
  }
}

/* Onside-style alternating panel: a rounded gray card that spans the section
   with a small side margin. Apply to alternating sections for clear separation. */
.ts-panel{
  background:var(--ts-gray);
  margin-inline:var(--ts-panel-inset);
  border-radius:var(--ts-panel-radius);
}

/* ---- Button component (default = wizard style, big + approachable) ---- */
.ts-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:56px; padding:16px 28px;
  font-family:var(--ts-font); font-weight:700; font-size:16px; line-height:1;
  letter-spacing:var(--ts-tracking); text-transform:none; text-align:center; text-decoration:none;
  border-radius:var(--ts-r-control); border:1.5px solid transparent; cursor:pointer;
  transition:background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.ts-btn--primary{ background:var(--ts-purple); color:#fff; }
.ts-btn--primary:hover{ background:var(--ts-purple-hover); }
.ts-btn--secondary{ background:transparent; color:var(--ts-purple); border-color:var(--ts-purple); }
.ts-btn--secondary:hover{ background:var(--ts-purple); color:#fff; }
.ts-btn--tertiary{
  min-height:0; padding:4px 0; background:none; border:0; color:var(--ts-purple);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
}
.ts-btn--tertiary:hover{ text-decoration-thickness:2px; }
@media (max-width:749px){ .ts-btn--block-mobile{ width:100%; } }

/* Primary personalize CTA (inline trigger): force the system button look,
   overriding theme defaults that render it 0-radius + uppercase. */
.trackstar-personalize-trigger{
  border-radius:var(--ts-r-control) !important;
  text-transform:none !important;
  min-height:56px;
  font-size:16px;
  padding:16px 28px;
}

/* ---- Section scaffold helpers (opt-in) ---- */
.ts-section{ padding-block:var(--ts-section-pad); }
.ts-section__inner{ max-width:var(--ts-container); margin:0 auto; padding-inline:var(--ts-gutter); }
.ts-section__head{ text-align:center; margin-bottom:var(--ts-title-gap); }
.ts-section__title{
  margin:0; font-family:var(--ts-font); font-weight:700;
  font-size:var(--ts-title); line-height:var(--ts-title-lh);
  letter-spacing:var(--ts-tracking); text-align:center; text-wrap:balance;
}
.ts-surface-gray{ background:var(--ts-gray); }
.ts-surface-dark{ background:var(--ts-ink); color:#fff; }