/* ==========================================================================
   Bestie Squad — Design Tokens
   Extracted live from quiz.bestiesquadhq.com on 2026-08-28.
   These are the real values, not approximations. Do not adjust.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  /* --- Ground and ink ---------------------------------------------------- */
  --bg:           #FFFEF8;  /* page ground. warm near-white, NOT pure white */
  --surface:      #FFFFFF;  /* raised cards */
  --ink:          #0A0A0A;  /* all body copy, all outlines. soft black */
  --mute:         #5C5C5C;  /* secondary copy */
  --mute-light:   #9A9A9A;  /* captions, meta */
  --hairline:     #E5E1D4;  /* dividers */

  /* --- Accents ----------------------------------------------------------- */
  --yellow:       #FBB615;  /* primary CTA. the smiley. 11.1:1 on ink */
  --yellow-soft:  #FFF6D6;  /* tint block */

  /* UNCONFIRMED — sampled from Canva PNGs, not from code.
     Verify against the quiz result pages before shipping. */
  --coral:        #FF6663;
  --coral-soft:   #FCE4E4;
  --violet:       #9B62CB;
  --violet-soft:  #ECDEEF;

  /* --- Type -------------------------------------------------------------- */
  --display: "Archivo Black", system-ui, sans-serif;
  --body:    "Plus Jakarta Sans", system-ui, sans-serif;
  /* --script: no webfont chosen yet. See CLAUDE.md open item 2. */

  /* Fluid scale. Maxes out at 1200px — the same width the container stops at.
     No media queries needed for type. */
  --fs-h1:   clamp(2.25rem, 2.25rem + ((1vw - 0.2rem) * 3.18), 4rem);   /* 36 → 64 */
  --fs-h2:   clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 2.27), 3rem);   /* 28 → 48 */
  --fs-h3:   clamp(1.375rem, 1.375rem + ((1vw - 0.2rem) * 1.14), 2rem); /* 22 → 32 */
  --fs-lead: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.68), 1.5rem);/* 18 → 24 */
  --fs-body: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.23), 1.125rem);     /* 16 → 18 */
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-display: 0.98;   /* from the live h1: 64px / 62.72px */
  --lh-body:    1.5;    /* hard 1.5 on every body size */
  --ls-display: -0.02em;
  --ls-eyebrow:  0.14em;

  /* --- Space. 1.5x ratio. ------------------------------------------------ */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2.25rem;
  --s-6: 3.375rem;
  --s-7: 5rem;

  --sec-major:     clamp(2.5rem, 8vw, 6rem);
  --sec-secondary: clamp(1.75rem, 5vw, 3rem);

  /* --- Layout ------------------------------------------------------------ */
  --content: 780px;   /* reading measure — yields ~67 chars at 24px */
  --wide:    1200px;
  --gutter:  clamp(1.25rem, 4vw, 3rem);

  /* --- Form -------------------------------------------------------------- */
  --r-pill:  100px;   /* anything clickable */
  --r-card:  10px;    /* anything containing content */
  --border:  2.5px solid var(--ink);
  --shadow:  5px 5px 0 var(--ink);   /* hard offset. no blur. */
}

/* Single visual world — the brand commits to its cream ground in both
   OS themes. Paint explicitly so the host never shows through. */
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* --- Primitives ---------------------------------------------------------- */

.display {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* Highlighter-pill eyebrow — matches the quiz's CTA treatment */
.eyebrow--pill {
  display: inline-block;
  background: var(--yellow);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  padding: 16px 32px;
  border-radius: var(--r-pill);
  border: var(--border);
  background: var(--yellow);
  color: var(--ink);          /* NEVER white. see CLAUDE.md */
  text-decoration: none;
  cursor: pointer;
}
.btn--ghost { background: var(--bg); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.card {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s-4);
}

/* Checkerboard rule — the brand's strongest ownable device.
   Top and bottom of every page, matching the quiz. */
.checker {
  height: 30px;
  background-color: var(--bg);
  background-image:
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%),
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

.wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--content); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}