/* =========================================================
   Froggy Studios — Colors & Type
   Black & white, bold, playful-but-minimal indie game studio
   ========================================================= */

/* ---------- Webfonts ----------
   Display + UI: "Bricolage Grotesque" — chunky condensed sans, the
   closest free analogue to the FROGGY wordmark (heavy, slightly
   condensed, friendly humanist proportions).
   Body: "Inter" only as fallback; primary body uses Bricolage too at
   regular weight. Mono: "JetBrains Mono".

   FLAGGED: We do not have the original wordmark font file.
   Bricolage Grotesque is a substitution — please confirm or
   upload the real typeface.
*/
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* ---------- Color Tokens ---------- */
  --pond-black:        #0A0A0A;   /* canonical brand black */
  --pond-ink:          #1A1A1A;   /* slightly raised surface */
  --pond-mud:          #2A2A2A;   /* surface 2 */
  --pond-stone:        #3D3D3D;   /* hairline / disabled fg on dark */
  --pond-fog:          #6B6B6B;   /* secondary fg on dark */
  --pond-mist:         #A8A8A8;   /* tertiary fg / placeholder */
  --pond-paper:        #E8E8E8;   /* secondary fg on light surface */
  --pond-bone:         #F4F4F2;   /* light surface (warm-tinted off-white) */
  --pond-white:        #FFFFFF;   /* pure white — primary fg on black */

  /* Accent — used SPARINGLY (links, focus, selection only) */
  --pond-lily:         #C8FF3E;   /* highlighter green, pond-lily */

  /* ---------- Semantic — dark mode is the brand default ---------- */
  --bg:                var(--pond-black);
  --bg-raised:         var(--pond-ink);
  --bg-sunk:           #050505;
  --surface:           var(--pond-mud);
  --hairline:          var(--pond-stone);

  --fg:                var(--pond-white);
  --fg-2:              var(--pond-mist);
  --fg-3:              var(--pond-fog);
  --fg-disabled:       var(--pond-stone);

  --accent:            var(--pond-lily);
  --accent-fg:         var(--pond-black);

  --selection-bg:      var(--pond-white);
  --selection-fg:      var(--pond-black);

  /* ---------- Type ---------- */
  --font-display:      'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-body:         'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-mono:         'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-black:      800;

  /* Type scale — display gets a wide range; body stays restrained */
  --fs-display-xl:     clamp(64px, 12vw, 168px);
  --fs-display-lg:     clamp(48px, 8vw, 112px);
  --fs-display:        clamp(40px, 6vw, 80px);
  --fs-h1:             48px;
  --fs-h2:             32px;
  --fs-h3:             22px;
  --fs-h4:             17px;
  --fs-body:           16px;
  --fs-small:          14px;
  --fs-eyebrow:        12px;   /* uppercase, tracked */

  --lh-tight:          0.92;
  --lh-snug:           1.05;
  --lh-normal:         1.5;
  --lh-loose:          1.65;

  --tr-tight:          -0.03em;
  --tr-normal:         -0.01em;
  --tr-loose:          0.16em;     /* eyebrow / STUDIOS subtitle */

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

  /* ---------- Radii ---------- */
  --r-0:  0px;        /* default — brand prefers crisp corners */
  --r-1:  4px;
  --r-2:  8px;
  --r-pill: 999px;

  /* ---------- Borders ---------- */
  --bw-hair:  1px;
  --bw-line:  2px;
  --bw-thick: 3px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-2: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-pop: 6px 6px 0 var(--pond-white);    /* hard offset, comic-style — used on featured CTAs only */

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ---------- Semantic element styles ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--tr-normal);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-h4);
  line-height: 1.3;
  margin: 0;
}
p, .p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  color: var(--fg-2);
}
.display-xl {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--pond-fog);
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent); color: var(--fg); }
a:active { color: var(--accent); }