/* ============================================================
   jawbreaker.io — Colors & Type
   ------------------------------------------------------------
   The brand is CANDY: bright cyan, a glossy white jawbreaker
   with rainbow rings (raspberry, gold, green, blue), rounded
   friendly type, soft navy-tinted shadows, and a springy,
   sprinkle-throwing hover effect.
   ============================================================ */

/* Fonts — bundled locally in fonts/ (self-contained, no CDN needed).
   Fredoka is the canonical jawbreaker.io brand font: the wordmark,
   headings, and all candy-world display type are set in it (rounded
   terminals, friendly single-story 'a'). Inter carries body copy and
   the giant mantra (800 weight, lowercase). Space Mono for tokens.
   Fredoka & Inter are variable fonts — one file covers all weights. */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/fredoka-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-mono-700.woff2") format("woff2");
}

:root {
  /* ---------- CANDY palette ---------- */
  --candy-cyan:        #03BBD8; /* signature background cyan      */
  --candy-cyan-deep:   #0398b1; /* pressed / shadowed cyan        */
  --candy-white:       #FFFFFF; /* the jawbreaker body            */
  --candy-raspberry:   #EA2467; /* outer ring — hot pink/magenta  */
  --candy-gold:        #FFB205; /* ring — gold/orange ("io" dot)  */
  --candy-green:       #7AB42C; /* ring — lime green              */
  --candy-blue:        #1F8FD0; /* inner ring — bright blue       */
  --candy-ink:         #021B34; /* the heavy navy outline         */

  /* ---------- Semantic — surfaces ---------- */
  --bg:                var(--candy-cyan);
  --surface:           var(--candy-white);
  --surface-ink:       var(--candy-ink);

  /* ---------- Semantic — text ---------- */
  --fg-1:              var(--candy-ink);   /* primary on light    */
  --fg-2:              #3c5063;            /* secondary on light  */
  --fg-3:              #6c7f8d;            /* tertiary / captions */
  --fg-on-cyan:        #FFFFFF;            /* text on cyan bg     */

  /* ---------- Semantic — accents (default = candy) ---------- */
  --accent:            var(--candy-raspberry);
  --accent-2:          var(--candy-gold);
  --accent-3:          var(--candy-green);
  --accent-4:          var(--candy-blue);
  --link:              var(--candy-blue);

  /* ---------- State feedback ---------- */
  --success:           var(--candy-green);
  --warning:           var(--candy-gold);
  --danger:            var(--candy-raspberry);
  --info:              var(--candy-blue);

  /* ---------- Type families ---------- */
  --font-display: "Fredoka", "Baloo 2", "Quicksand", system-ui, sans-serif; /* wordmark / candy headings */
  --font-sans:    "Inter", "Avenir Next", "Segoe UI", system-ui, sans-serif; /* UI + mantra */
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- Type scale (fluid where useful) ---------- */
  --text-mantra:  clamp(1.9rem, 4.8vw, 5.3rem); /* the giant phrase   */
  --text-hero:    clamp(2.4rem, 5vw, 4.5rem);
  --text-h1:      2.75rem;   /* 44px */
  --text-h2:      2rem;      /* 32px */
  --text-h3:      1.5rem;    /* 24px */
  --text-lg:      1.25rem;   /* 20px */
  --text-base:    1rem;      /* 16px */
  --text-sm:      0.875rem;  /* 14px */
  --text-xs:      0.75rem;   /* 12px */

  /* ---------- Weights ---------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-black:   800; /* the mantra weight */

  /* ---------- Line height & tracking ---------- */
  --lh-tight:  1.05;
  --lh-snug:   1.15; /* mantra */
  --lh-normal: 1.5;
  --lh-loose:  1.7;
  --track-mantra: 0.02em;
  --track-caps:   0.08em; /* uppercase eyebrows / hints */

  /* ---------- Radii (rounded, candy-soft) ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-sm: 0 1px 3px rgba(2,27,52,.12);
  --shadow-md: 0 6px 18px rgba(2,27,52,.16);
  --shadow-lg: 0 18px 48px rgba(2,27,52,.22);
  /* candy "sticker" outline — the logo's heavy navy keyline */
  --sticker: 0 0 0 4px var(--candy-ink);

  /* ---------- Motion ---------- */
  --ease-pop:  cubic-bezier(.22,1,.36,1); /* the site's spring-out */
  --ease-std:  cubic-bezier(.4,0,.2,1);
  --dur-fast:  200ms;
  --dur-med:   280ms;
  --dur-slow:  340ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */
.display, .wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  letter-spacing: -0.01em;
}
.mantra {
  font-family: var(--font-sans);
  font-weight: var(--w-black);
  font-size: var(--text-mantra);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-mantra);
  text-transform: lowercase;
}
h1 { font-family: var(--font-display); font-weight: var(--w-bold);  font-size: var(--text-h1); line-height: var(--lh-tight); letter-spacing:-0.01em; }
h2 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--text-h2); line-height: var(--lh-tight); }
h3 { font-family: var(--font-sans);    font-weight: var(--w-bold);  font-size: var(--text-h3); line-height: var(--lh-snug); }
p, li, body { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--text-base); line-height: var(--lh-normal); }
.eyebrow, .hint {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}
small, .caption { font-size: var(--text-sm); color: var(--fg-3); }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }