/* ============================================================
   ScanCafe Brand Kit — COMPONENTS
   Spec: docs/core/BRAND_KIT.md  ·  Requires: sc-tokens.css

   Base element typography + the canonical component classes.
   Loaded AFTER the legacy bundle so it wins on source order at
   equal specificity — that is why there is no !important here.
   Keep it that way: if something does not take effect, fix the
   legacy rule (or bridge it), do not escalate with !important.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* ---------- Base ---------------------------------------- */

body {
  font-family: var(--sc-font);
  font-size: var(--sc-body);
  line-height: var(--sc-lh-body);
  color: var(--sc-text);
  background: var(--sc-bg);
}

/* ---------- Headings ------------------------------------ */
/* One h1 per page. h5/h6 exist so they stop falling through
   to Bootstrap defaults (legacy had no rule for either). */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sc-font);
  margin-top: 0;
  margin-bottom: var(--sc-heading-mb);
  text-wrap: balance;
}

h1 {
  font-size: var(--sc-h1);
  font-weight: var(--sc-weight-semi);
  line-height: var(--sc-lh-tight);
  color: var(--sc-heading);
}

h2 {
  font-size: var(--sc-h2);
  font-weight: var(--sc-weight-semi);
  line-height: 1.25;
  color: var(--sc-heading);
}

h3 {
  font-size: var(--sc-h3);
  font-weight: var(--sc-weight-semi);
  line-height: var(--sc-lh-head);
  color: var(--sc-heading);
}

h4 {
  font-size: var(--sc-h4);
  font-weight: var(--sc-weight-semi);
  line-height: 1.35;
  color: var(--sc-text);
}

h5 {
  font-size: var(--sc-h5);
  font-weight: var(--sc-weight-semi);
  color: var(--sc-text);
}

/* h6 is the eyebrow / label heading — not a smaller h5 */
h6 {
  font-size: var(--sc-h6);
  font-weight: var(--sc-weight-semi);
  color: var(--sc-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---------- Copy ---------------------------------------- */

p {
  margin-top: 0;
  margin-bottom: var(--sc-para-mb);
}

.sc-lead {
  font-size: var(--sc-lead);
  font-weight: var(--sc-weight-regular);
  line-height: 1.4;
  color: var(--sc-navy);
}

.sc-small,
small {
  font-size: var(--sc-small);
  color: var(--sc-text-muted);
}

ul, ol {
  padding-left: 20px;
  margin-bottom: var(--sc-para-mb);
}

li {
  margin-bottom: var(--sc-space-2);
}

strong, b {
  font-weight: var(--sc-weight-semi);
}

/* ---------- Links --------------------------------------- */
/* Legacy had no global rule, so Bootstrap blue leaked through.
   Three contexts, no exceptions. Hover underlines — it never
   shifts to a derived shade (there are none in the palette). */

a {
  color: var(--sc-orange);
  text-decoration: none;
  transition: color var(--sc-transition);
}

a:hover,
a:focus {
  color: var(--sc-orange);
  text-decoration: underline;
}

/* Data / utility links: order ids, price links, "view details".
   600 weight compensates for light blue's contrast on white. */
.sc-link-utility {
  color: var(--sc-light-blue);
  font-weight: var(--sc-weight-semi);
}

.sc-link-utility:hover {
  color: var(--sc-light-blue);
  text-decoration: underline;
}

/* Links sitting on navy/dark grounds (footer, mega-menu) */
.sc-on-dark a,
a.sc-link-on-dark {
  color: var(--sc-on-brand);
}

.sc-on-dark a:hover,
a.sc-link-on-dark:hover {
  color: var(--sc-light-blue);
  text-decoration: none;
}

/* ---------- Buttons ------------------------------------- */
/* Never fixed-width: padding-based so long labels cannot
   overflow the way the legacy 130px buttons did.
   The transparent border is reserved up-front so a hover that
   introduces a visible border does not shift layout by 1px. */

.sc-btn {
  display: inline-block;
  font-family: var(--sc-font);
  font-size: var(--sc-body);
  font-weight: var(--sc-weight-semi);
  line-height: 1.25;
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: var(--sc-radius);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sc-transition),
              color var(--sc-transition),
              border-color var(--sc-transition);
}

.sc-btn:hover {
  text-decoration: none;
}

.sc-btn:focus-visible {
  outline: 2px solid var(--sc-navy);
  outline-offset: 2px;
}

.sc-btn:disabled,
.sc-btn.disabled {
  opacity: .55;
  pointer-events: none;
}

/* Sizes */
.sc-btn-lg {
  font-size: var(--sc-h4);          /* 18px */
  padding: 12px 32px;
}

.sc-btn-sm {
  font-size: var(--sc-small);       /* 14px */
  padding: 8px 16px;
}

.sc-btn-block {
  display: block;
  width: 100%;
}

/* Variants — every hover stays inside the three-hue palette */

.sc-btn-primary {
  background-color: var(--sc-orange);
  border-color: var(--sc-orange);
  color: var(--sc-on-brand);
}

.sc-btn-primary:hover,
.sc-btn-primary:focus {
  background-color: var(--sc-bg);
  border-color: var(--sc-orange);
  color: var(--sc-orange);
}

.sc-btn-secondary {
  background-color: var(--sc-navy);
  border-color: var(--sc-navy);
  color: var(--sc-on-brand);
}

.sc-btn-secondary:hover,
.sc-btn-secondary:focus {
  background-color: var(--sc-light-blue);
  border-color: var(--sc-light-blue);
  color: var(--sc-on-brand);
}

.sc-btn-utility {
  background-color: var(--sc-light-blue);
  border-color: var(--sc-light-blue);
  color: var(--sc-on-brand);
}

.sc-btn-utility:hover,
.sc-btn-utility:focus {
  background-color: var(--sc-navy);
  border-color: var(--sc-navy);
  color: var(--sc-on-brand);
}

.sc-btn-outline {
  background-color: transparent;
  border-color: var(--sc-navy);
  color: var(--sc-navy);
}

.sc-btn-outline:hover,
.sc-btn-outline:focus {
  background-color: var(--sc-navy);
  border-color: var(--sc-navy);
  color: var(--sc-on-brand);
}

/* Neutral action — grey is sanctioned for cancel/back only */
.sc-btn-back {
  background-color: var(--sc-text-muted);
  border-color: var(--sc-text-muted);
  color: var(--sc-on-brand);
}

.sc-btn-back:hover,
.sc-btn-back:focus {
  background-color: var(--sc-text);
  border-color: var(--sc-text);
  color: var(--sc-on-brand);
}

/* ---------- Forms --------------------------------------- */
/* 16px inputs: anything smaller makes iOS Safari zoom on focus. */

.sc-field {
  margin-bottom: var(--sc-field-gap);
}

.sc-field label,
.sc-label {
  display: block;
  font-size: var(--sc-small);
  font-weight: var(--sc-weight-semi);
  color: var(--sc-navy);
  margin-bottom: var(--sc-space-2);
}

.sc-input,
.sc-field input[type="text"],
.sc-field input[type="email"],
.sc-field input[type="tel"],
.sc-field input[type="password"],
.sc-field input[type="number"],
.sc-field select,
.sc-field textarea {
  width: 100%;
  font-family: var(--sc-font);
  font-size: var(--sc-body);
  line-height: var(--sc-lh-body);
  color: var(--sc-text);
  background-color: var(--sc-bg);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 10px 14px;
  transition: border-color var(--sc-transition), box-shadow var(--sc-transition);
}

.sc-input:focus,
.sc-field input:focus,
.sc-field select:focus,
.sc-field textarea:focus {
  outline: none;
  border-color: var(--sc-light-blue);
  box-shadow: 0 0 0 3px rgba(0, 181, 226, .2);
}

.sc-input.is-invalid,
.sc-field input.is-invalid,
.sc-field select.is-invalid,
.sc-field textarea.is-invalid {
  border-color: var(--sc-danger);
}

.sc-error {
  display: block;
  font-size: 13px;
  color: var(--sc-danger);
  margin-top: var(--sc-space-1);
}

/* ---------- Cards --------------------------------------- */

.sc-card {
  background: var(--sc-bg);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-card);
  padding: var(--sc-card-pad);
}

/* ---------- Order-flow stepper --------------------------- */
/* Orange states are deliberate brand behaviour, carried over
   from the legacy funnel (steps.css). */

.sc-stepper {
  display: flex;
  align-items: center;
  gap: var(--sc-space-6);
  flex-wrap: wrap;
}

.sc-step {
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
}

.sc-step-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sc-h5);
  font-weight: var(--sc-weight-semi);
  background: var(--sc-bg);
  border: 1px solid var(--sc-border);
  color: var(--sc-text-muted);
}

.sc-step-label {
  font-size: var(--sc-small);
  color: var(--sc-text-muted);
}

.sc-step.is-current .sc-step-icon {
  background: rgba(255, 131, 3, .2);
  border-color: var(--sc-orange);
  color: var(--sc-orange);
}

.sc-step.is-done .sc-step-icon {
  background: var(--sc-orange);
  border-color: var(--sc-orange);
  color: var(--sc-on-brand);
}

.sc-step.is-current .sc-step-label,
.sc-step.is-done .sc-step-label {
  color: var(--sc-text);
}

/* ---------- Pill tabs (media selector) ------------------- */

.sc-pills {
  display: inline-flex;
  background: var(--sc-orange);
  border-radius: var(--sc-radius-pill);
  padding: 5px;
}

.sc-pill {
  border: 0;
  background: transparent;
  color: var(--sc-on-brand);
  font-family: var(--sc-font);
  font-size: var(--sc-small);
  border-radius: var(--sc-radius-pill);
  padding: 6px 20px;
  margin: 0 2px;
  cursor: pointer;
  transition: background-color var(--sc-transition), color var(--sc-transition);
}

.sc-pill.active {
  background: var(--sc-bg);
  color: var(--sc-navy);
}

/* ---------- Layout helpers ------------------------------- */

.sc-section {
  padding-top: var(--sc-section-gap);
  padding-bottom: var(--sc-section-gap);
}

.sc-section-soft {
  background: var(--sc-bg-soft);
}

/* ---------- Overflow guards ------------------------------ */
/* The kit's hard rule: the page body never scrolls sideways. Padded, full-width
   form fields are the usual culprit — their padding must sit inside the width. */

.sc-input,
.sc-field input,
.sc-field select,
.sc-field textarea {
  box-sizing: border-box;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- Accessibility -------------------------------- */

:focus-visible {
  outline: 2px solid var(--sc-orange);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}