/*
  Sticker Cheetah — Design Tokens (CSS)
  v1.1 — July 2026
  Source of truth: BRAND_GUIDE.md in this same package.
  Color values sourced from lOGO_AND_wEBSITE_cOLORS.ai (official brand artwork).
  Import this file first in every app before writing custom styles.
  Never hardcode a hex/px value that already has a token below.
*/

:root {
  /* ---------- Color: Core anchors ---------- */
  /* Gold (H42°) and Blue (H220°) are 178° apart — true color-wheel complements. */
  --sc-gold: #FFB200;        /* Cheetah Gold — warm anchor */
  --sc-blue: #1966FF;        /* Electric Blue — cool anchor */
  --sc-ink: #1F1F21;         /* Ink — primary text + dark surface */
  --sc-white: #FFFFFF;

  /* ---------- Color: Gold ramp (warm family) ---------- */
  --sc-gold-shade: #995B08;  /* pressed/active state, doubles as Warning text */
  --sc-gold-bright: #FDB919; /* hover state, secondary link color */
  --sc-gold-tint: #FFECB1;   /* pale wash, doubles as Warning background */

  /* ---------- Color: Blue ramp (cool family) ---------- */
  --sc-blue-shade: #0E327F;  /* pressed/active state, doubles as Info text */
  --sc-blue-deep: #2E2ED9;   /* hover state — shifts toward violet */
  --sc-blue-tint: #BFCAFF;   /* pale wash, doubles as Info background */

  /* ---------- Color: Warm neutrals (hue ≈ 28°, biased toward Gold) ---------- */
  --sc-warm-gray: #66615C;   /* secondary/muted text on light backgrounds */
  --sc-taupe: #99918A;       /* muted borders, disabled states, placeholder text */
  --sc-sand: #E6E0DB;        /* card / secondary surface */
  --sc-cream: #F2EEEB;       /* default page background */

  /* ---------- Color: Cool neutrals (hue = 240°, biased toward Blue) ---------- */
  --sc-slate: #606066;       /* secondary icons/text, cooler alternative to warm-gray */
  --sc-ink-soft: #3E3E42;    /* secondary dark surface */

  /* ---------- Color: Semantic ---------- */
  /* Warning and Info reuse the Gold/Blue ramps directly — no new hue needed. */
  --sc-warning: var(--sc-gold-shade);      /* #995B08 */
  --sc-warning-bg: var(--sc-gold-tint);    /* #FFECB1 */
  --sc-info: var(--sc-blue-shade);         /* #0E327F */
  --sc-info-bg: var(--sc-blue-tint);       /* #BFCAFF */
  /* Success (H150°) and Danger (H6°) are the only genuinely new hues in the system,
     placed between/adjacent to the Gold/Blue axis rather than pulled from a generic default. */
  --sc-success: #1F7A4D;
  --sc-success-bg: #E5F5ED;
  --sc-danger: #AD2D1F;
  --sc-danger-bg: #FAE7E5;

  /* ---------- Typography ---------- */
  --sc-font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;

  --sc-text-display-size: 32px;
  --sc-text-display-line: 1.2;
  --sc-text-display-weight: 700;

  --sc-text-h1-size: 24px;
  --sc-text-h1-line: 1.25;
  --sc-text-h1-weight: 700;

  --sc-text-h2-size: 18px;
  --sc-text-h2-line: 1.3;
  --sc-text-h2-weight: 600;

  --sc-text-body-size: 15px;
  --sc-text-body-line: 1.5;
  --sc-text-body-weight: 400;

  --sc-text-small-size: 13px;
  --sc-text-small-line: 1.4;
  --sc-text-small-weight: 400;

  --sc-text-label-size: 12px;
  --sc-text-label-line: 1.2;
  --sc-text-label-weight: 600;
  --sc-text-label-tracking: 0.03em;

  /* ---------- Spacing (4px base unit) ---------- */
  --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-8: 48px;

  /* ---------- Radius ---------- */
  --sc-radius-sm: 6px;
  --sc-radius-md: 10px;
  --sc-radius-lg: 16px;
  --sc-radius-full: 999px;

  /* ---------- Shadow ---------- */
  --sc-shadow-sm: 0 1px 2px rgba(31, 31, 33, 0.08);
  --sc-shadow-md: 0 4px 12px rgba(31, 31, 33, 0.10);
  --sc-shadow-lg: 0 12px 32px rgba(31, 31, 33, 0.16);

  /* ---------- Motion ---------- */
  --sc-motion-fast: 150ms;
  --sc-motion-base: 200ms;
  --sc-motion-easing: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Minimum touch target ---------- */
  --sc-tap-target-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sc-motion-fast: 0ms;
    --sc-motion-base: 0ms;
  }
}

/* ---------- Base element mapping (optional convenience layer) ---------- */
body {
  font-family: var(--sc-font-family);
  background: var(--sc-cream);
  color: var(--sc-ink);
  font-size: var(--sc-text-body-size);
  line-height: var(--sc-text-body-line);
}

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-2);
  min-height: var(--sc-tap-target-min);
  padding: 0 var(--sc-space-4);
  border-radius: var(--sc-radius-md);
  font-family: var(--sc-font-family);
  font-size: var(--sc-text-label-size);
  font-weight: var(--sc-text-label-weight);
  letter-spacing: var(--sc-text-label-tracking);
  border: none;
  cursor: pointer;
  transition: background var(--sc-motion-fast) var(--sc-motion-easing),
              color var(--sc-motion-fast) var(--sc-motion-easing),
              transform var(--sc-motion-fast) var(--sc-motion-easing);
}
.sc-btn:active { transform: scale(0.98); }
.sc-btn:focus-visible { outline: 2px solid var(--sc-blue); outline-offset: 2px; }

/* Primary: Ink + Gold — the brand's own two anchors, 9.1:1 contrast. Replaces Volt. */
.sc-btn--primary { background: var(--sc-ink); color: var(--sc-gold); }
.sc-btn--primary:hover { background: var(--sc-ink-soft); color: var(--sc-gold-bright); }
.sc-btn--primary:active { background: #000; color: var(--sc-gold-shade); }

.sc-btn--success { background: var(--sc-success); color: var(--sc-white); }
.sc-btn--success:hover { background: #24915C; }

.sc-btn--secondary { background: transparent; color: var(--sc-ink); border: 1.5px solid var(--sc-ink); }
.sc-btn--secondary:hover { background: var(--sc-sand); }

.sc-btn--tertiary { background: transparent; color: var(--sc-blue); min-height: auto; padding: 0; }
.sc-btn--tertiary:hover { color: var(--sc-blue-deep); }

/* Gold variant — for marketing-context surfaces matching the live site's default scheme */
.sc-btn--gold { background: var(--sc-gold); color: var(--sc-ink); }
.sc-btn--gold:hover { background: var(--sc-gold-bright); }
.sc-btn--gold:active { background: var(--sc-gold-shade); color: var(--sc-white); }

.sc-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--sc-space-3);
  border-radius: var(--sc-radius-full);
  font-size: var(--sc-text-label-size);
  font-weight: var(--sc-text-label-weight);
}
.sc-chip--meta { background: var(--sc-sand); color: var(--sc-ink); }
.sc-chip--pending { background: var(--sc-warning-bg); color: var(--sc-warning); }
.sc-chip--approved { background: var(--sc-success-bg); color: var(--sc-success); }
.sc-chip--changes { background: var(--sc-danger-bg); color: var(--sc-danger); }
.sc-chip--version { background: var(--sc-ink); color: var(--sc-white); }

.sc-callout {
  display: flex;
  gap: var(--sc-space-3);
  padding: var(--sc-space-4);
  border-radius: var(--sc-radius-md);
  border-left: 3px solid;
  font-size: var(--sc-text-small-size);
}
.sc-callout--warning { background: var(--sc-warning-bg); color: var(--sc-warning); border-color: var(--sc-warning); }
.sc-callout--success { background: var(--sc-success-bg); color: var(--sc-success); border-color: var(--sc-success); }
.sc-callout--danger { background: var(--sc-danger-bg); color: var(--sc-danger); border-color: var(--sc-danger); }
.sc-callout--info { background: var(--sc-info-bg); color: var(--sc-info); border-color: var(--sc-info); }

.sc-card {
  background: var(--sc-white);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-md);
  padding: var(--sc-space-5);
}