/* ============================================================
   ScanCafe Brand Kit — TOKENS
   Spec: docs/core/BRAND_KIT.md  ·  Reference: docs/core/brand-kit.html
   Rollout: docs/core/BRAND_ROLLOUT_PLAN.md (Phase 0)

   The single source of truth for every customer-facing colour,
   size, radius and space. Never hard-code a value that exists here.

   PALETTE IS LOCKED: three brand hues only (orange / light blue /
   navy) plus neutrals. There are no darkened "hover" shades —
   hover states swap within the palette or add an underline.
   ============================================================ */

:root {

  /* ---- Brand: the only three hues allowed --------------- */
  --sc-orange:      #ff8303;   /* primary CTA, content links, stepper active */
  --sc-light-blue:  #00b5e2;   /* utility buttons, data links, hovers */
  --sc-navy:        #003a63;   /* headings, footer, secondary buttons */

  /* ---- Neutrals (not brand hues) ------------------------ */
  --sc-text:        #454545;   /* body copy */
  --sc-text-muted:  #666666;   /* secondary text, captions, cancel/back */
  --sc-heading:     var(--sc-navy);
  --sc-bg:          #ffffff;
  --sc-bg-soft:     #f3f3f3;   /* alternate section bands */
  --sc-border:      #cccccc;   /* inputs, card borders */
  --sc-border-soft: #e5e5e5;   /* dividers */
  --sc-on-brand:    #ffffff;   /* text on any brand fill */

  /* ---- Semantic: status only, never decorative ---------- */
  --sc-danger:      #dc3545;
  --sc-success:     #198754;

  /* ---- Typography --------------------------------------- */
  --sc-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Decorative numerals only (step counters, big stats) — never body copy.
     h1 remains the largest size for anything that is actually text. */
  --sc-display: 80px;

  --sc-h1:      42px;
  --sc-h2:      28px;
  --sc-h3:      22px;
  --sc-h4:      18px;
  --sc-h5:      16px;
  --sc-h6:      14px;
  --sc-lead:    22px;
  --sc-body:    16px;   /* base — was 13px in legacy */
  --sc-small:   14px;

  --sc-lh-tight: 1.2;
  --sc-lh-head:  1.3;
  --sc-lh-body:  1.6;

  --sc-weight-regular: 400;
  --sc-weight-semi:    600;
  --sc-weight-bold:    700;   /* only these three are loaded */

  /* ---- Radius & elevation -------------------------------- */
  --sc-radius-sm:   4px;    /* tags, checkboxes */
  --sc-radius:      6px;    /* buttons, inputs */
  --sc-radius-lg:   10px;   /* cards, wizard panels, modals */
  --sc-radius-pill: 999px;  /* pill tabs, badges */
  --sc-shadow-card: 0 8px 20px rgba(0, 58, 99, .12);

  /* ---- Spacing: 8-point scale ---------------------------- */
  --sc-space-1: 4px;
  --sc-space-2: 8px;
  --sc-space-3: 12px;
  --sc-space-4: 16px;
  --sc-space-5: 24px;
  --sc-space-6: 32px;
  --sc-space-7: 48px;
  --sc-space-8: 64px;
  --sc-space-9: 80px;

  /* Role aliases — prefer these in components */
  --sc-section-gap:  var(--sc-space-8);   /* 32px on mobile, see below */
  --sc-card-pad:     var(--sc-space-5);
  --sc-heading-mb:   var(--sc-space-4);
  --sc-para-mb:      var(--sc-space-5);
  --sc-field-gap:    var(--sc-space-4);

  /* ---- Motion -------------------------------------------- */
  --sc-transition: .25s ease;
}

@media (max-width: 768px) {
  :root {
    --sc-display: 56px;
    --sc-h1:   28px;
    --sc-h2:   24px;
    --sc-h3:   20px;
    --sc-h4:   16px;
    --sc-lead: 18px;
    --sc-section-gap: var(--sc-space-6);
  }
}