/* ============================================================
   SMB CTA SYSTEM — design tokens + canonical rules
   ============================================================
   Five button styles + the icon-pill they share.

     .cta-flame              Primary. Flame fill. Identical on light + dark bg.
     .cta-secondary          Secondary on LIGHT bg. Outlined Dark Delft.
     .cta-secondary-on-dark  Secondary on DARK bg.  Outlined Cream.
     .cta-tertiary           Tertiary on LIGHT bg.  Dark Delft fill.
     .cta-tertiary-on-dark   Tertiary on DARK bg.   Cream fill.

   Inner round chip is .cta-flame-pill (kept for historical reasons).
   Colors flip with the parent's :hover state.

   Icons inside CTAs:
     →  Internal nav (same-site link)
     ↗  External link
     ←  Back to parent / "Main site"

   ALL VALUES come from CSS variables below, so this file is importable
   into Figma via Tokens Studio (or similar) as a single source of truth.
   ============================================================ */

:root {
  /* ---------- Palette tokens (subset used by the CTA system) -------- */
  --color-flame-500:        #F86447;
  --color-flame-700:        #DE2C08;
  --color-cream:            #F8F4EB;
  --color-dark-delft-500:   #203059;

  /* ---------- Primary CTA ---------- */
  --cta-primary-bg:         var(--color-flame-500);
  --cta-primary-bg-hover:   var(--color-flame-700);
  --cta-primary-fg:         var(--color-cream);
  --cta-primary-border:     var(--color-flame-500);
  --cta-primary-border-hover: var(--color-flame-700);
  --cta-primary-pill-bg:        var(--color-cream);
  --cta-primary-pill-fg:        var(--color-flame-500);
  /* Primary keeps its inner pill static. */

  /* ---------- Secondary on LIGHT ---------- */
  --cta-sec-light-bg:           transparent;
  --cta-sec-light-bg-hover:     var(--color-dark-delft-500);
  --cta-sec-light-fg:           var(--color-dark-delft-500);
  --cta-sec-light-fg-hover:     var(--color-cream);
  --cta-sec-light-border:       var(--color-dark-delft-500);
  --cta-sec-light-pill-bg:           var(--color-dark-delft-500);
  --cta-sec-light-pill-fg:           var(--color-cream);
  --cta-sec-light-pill-bg-hover:     var(--color-cream);
  --cta-sec-light-pill-fg-hover:     var(--color-dark-delft-500);

  /* ---------- Secondary on DARK ---------- */
  --cta-sec-dark-bg:            transparent;
  --cta-sec-dark-bg-hover:      var(--color-cream);
  --cta-sec-dark-fg:            var(--color-cream);
  --cta-sec-dark-fg-hover:      var(--color-dark-delft-500);
  --cta-sec-dark-border:        var(--color-cream);
  --cta-sec-dark-pill-bg:            var(--color-cream);
  --cta-sec-dark-pill-fg:            var(--color-dark-delft-500);
  --cta-sec-dark-pill-bg-hover:      var(--color-dark-delft-500);
  --cta-sec-dark-pill-fg-hover:      var(--color-cream);

  /* ---------- Tertiary on LIGHT — Dark Delft fill ---------- */
  --cta-ter-light-bg:           var(--color-dark-delft-500);
  --cta-ter-light-bg-hover:     var(--color-flame-500);
  --cta-ter-light-fg:           var(--color-cream);
  --cta-ter-light-fg-hover:     var(--color-cream);
  --cta-ter-light-border:       var(--color-dark-delft-500);
  --cta-ter-light-border-hover: var(--color-flame-500);
  --cta-ter-light-pill-bg:           var(--color-cream);
  --cta-ter-light-pill-fg:           var(--color-dark-delft-500);
  --cta-ter-light-pill-fg-hover:     var(--color-flame-500);

  /* ---------- Tertiary on DARK — Cream fill ---------- */
  --cta-ter-dark-bg:            var(--color-cream);
  --cta-ter-dark-bg-hover:      var(--color-flame-500);
  --cta-ter-dark-fg:            var(--color-dark-delft-500);
  --cta-ter-dark-fg-hover:      var(--color-cream);
  --cta-ter-dark-border:        var(--color-cream);
  --cta-ter-dark-border-hover:  var(--color-flame-500);
  --cta-ter-dark-pill-bg:            var(--color-dark-delft-500);
  --cta-ter-dark-pill-fg:            var(--color-cream);
  --cta-ter-dark-pill-fg-hover:      var(--color-cream);

  /* ---------- Shared timing ---------- */
  --cta-transition: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Rules
   ============================================================ */

/* PRIMARY */
.cta-flame {
  background-color: var(--cta-primary-bg);
  color: var(--cta-primary-fg);
  border: 1px solid var(--cta-primary-border);
  transition: background-color var(--cta-transition),
              border-color var(--cta-transition);
}
.cta-flame:hover {
  background-color: var(--cta-primary-bg-hover);
  border-color: var(--cta-primary-border-hover);
}
.cta-flame .cta-flame-pill {
  background-color: var(--cta-primary-pill-bg);
  color: var(--cta-primary-pill-fg);
}

/* SECONDARY on LIGHT */
.cta-secondary {
  background-color: var(--cta-sec-light-bg);
  color: var(--cta-sec-light-fg);
  border: 1px solid var(--cta-sec-light-border);
  transition: background-color var(--cta-transition),
              color var(--cta-transition),
              border-color var(--cta-transition);
}
.cta-secondary:hover {
  background-color: var(--cta-sec-light-bg-hover);
  border-color: var(--cta-sec-light-border);
  color: var(--cta-sec-light-fg-hover);
}
.cta-secondary .cta-flame-pill {
  background-color: var(--cta-sec-light-pill-bg);
  color: var(--cta-sec-light-pill-fg);
  transition: background-color var(--cta-transition),
              color var(--cta-transition);
}
.cta-secondary:hover .cta-flame-pill {
  background-color: var(--cta-sec-light-pill-bg-hover);
  color: var(--cta-sec-light-pill-fg-hover);
}

/* SECONDARY on DARK */
.cta-secondary-on-dark {
  background-color: var(--cta-sec-dark-bg);
  color: var(--cta-sec-dark-fg);
  border: 1px solid var(--cta-sec-dark-border);
  transition: background-color var(--cta-transition),
              color var(--cta-transition),
              border-color var(--cta-transition);
}
.cta-secondary-on-dark:hover {
  background-color: var(--cta-sec-dark-bg-hover);
  border-color: var(--cta-sec-dark-border);
  color: var(--cta-sec-dark-fg-hover);
}
.cta-secondary-on-dark .cta-flame-pill {
  background-color: var(--cta-sec-dark-pill-bg);
  color: var(--cta-sec-dark-pill-fg);
  transition: background-color var(--cta-transition),
              color var(--cta-transition);
}
.cta-secondary-on-dark:hover .cta-flame-pill {
  background-color: var(--cta-sec-dark-pill-bg-hover);
  color: var(--cta-sec-dark-pill-fg-hover);
}

/* TERTIARY on LIGHT */
.cta-tertiary {
  background-color: var(--cta-ter-light-bg);
  color: var(--cta-ter-light-fg);
  border: 1px solid var(--cta-ter-light-border);
  transition: background-color var(--cta-transition),
              color var(--cta-transition),
              border-color var(--cta-transition);
}
.cta-tertiary:hover {
  background-color: var(--cta-ter-light-bg-hover);
  border-color: var(--cta-ter-light-border-hover);
  color: var(--cta-ter-light-fg-hover);
}
.cta-tertiary .cta-flame-pill {
  background-color: var(--cta-ter-light-pill-bg);
  color: var(--cta-ter-light-pill-fg);
  transition: color var(--cta-transition);
}
.cta-tertiary:hover .cta-flame-pill {
  color: var(--cta-ter-light-pill-fg-hover);
}

/* TERTIARY on DARK */
.cta-tertiary-on-dark {
  background-color: var(--cta-ter-dark-bg);
  color: var(--cta-ter-dark-fg);
  border: 1px solid var(--cta-ter-dark-border);
  transition: background-color var(--cta-transition),
              color var(--cta-transition),
              border-color var(--cta-transition);
}
.cta-tertiary-on-dark:hover {
  background-color: var(--cta-ter-dark-bg-hover);
  border-color: var(--cta-ter-dark-border-hover);
  color: var(--cta-ter-dark-fg-hover);
}
.cta-tertiary-on-dark .cta-flame-pill {
  background-color: var(--cta-ter-dark-pill-bg);
  color: var(--cta-ter-dark-pill-fg);
  transition: color var(--cta-transition);
}
.cta-tertiary-on-dark:hover .cta-flame-pill {
  color: var(--cta-ter-dark-pill-fg-hover);
}

/* CTA labels never wrap — multi-word buttons stay on one line. */
.cta-flame, .cta-secondary, .cta-secondary-on-dark,
.cta-tertiary, .cta-tertiary-on-dark { white-space: nowrap; }