/* ============================================================
   Mid-Bootcamp Hackathon — shared styles + brand primitives
   ============================================================ */

@import url("tokens.css");


/* Smooth-rounded hexagon mask — every corner (including top/bottom points) softened.
   Single source of truth for every hex sticker in the kit. */
:root {
  --hex-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 220">\
<path d="M100 6 Q108 6 115 10 L181 48 Q200 60 200 82 L200 138 Q200 160 181 172 L115 210 Q108 214 100 214 Q92 214 85 210 L19 172 Q0 160 0 138 L0 82 Q0 60 19 48 L85 10 Q92 6 100 6 Z" fill="black"/>\
</svg>');
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--ih-font-body);
  color: var(--ih-deep-blue);
  background: var(--ih-tech-white);
  -webkit-font-smoothing: antialiased;
}

/* ─── 16:9 slide canvas ─────────────────────────────────── */
.slide {
  width: 1920px;
  height: 1080px;
  position: relative;
  overflow: hidden;
  background: var(--ih-tech-white);
}

.slide.dark      { background: var(--ih-deep-blue);      color: var(--ih-tech-white); }
.slide.corporate { background: var(--ih-corporate-blue); color: var(--ih-white); }
.slide.bright    { background: var(--ih-bright-blue);    color: var(--ih-deep-blue); }

/* ─── Hexagon sticker frame ─────────────────────────────────
   The brand uses a chunky hexagon (pointy-top, rounded corners).
   We approximate it via a clip-path + border-radius offset is hard,
   so we use SVG masks for crispness.
─────────────────────────────────────────────────────────── */
.hex-sticker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* polygon left for legacy elements; new hexes use the SVG mask via --hex-mask */
  clip-path: none;
}
.hex-sticker > svg, .hex-sticker > .pixel {
  pointer-events: none;
}

/* Color variants used in the reference */
.hex-pink    { background: var(--ih-bubblegum); }
.hex-green   { background: var(--ih-bright-green); }
.hex-bright  { background: var(--ih-bright-blue); }
.hex-blue    { background: var(--ih-corporate-blue); }
.hex-deep    { background: var(--ih-deep-blue); }
.hex-purple  { background: var(--ih-cyber-purple); }
.hex-yellow  { background: var(--ih-sun-yellow); }
.hex-tech    { background: var(--ih-tech-white); }

/* Soft, transparent hexes from the reference upload */
.hex-soft-pink   { background: #FCE3F8; }
.hex-soft-green  { background: #DEFCE9; }
.hex-soft-blue   { background: #DEF6FB; }
.hex-soft-purple { background: #D8DAFB; }

/* ─── Tilted "By Ironhack"-style sticker pill ──────────── */
.tag-pill {
  display: inline-block;
  padding: 8px 18px;
  background: var(--ih-bright-blue);
  color: var(--ih-deep-blue);
  font-family: var(--ih-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
  transform: rotate(-3deg);
}

/* ─── Mono caption tag (for dates) ──────────────────────── */
.mono-tag {
  display: inline-block;
  padding: 10px 18px;
  background: var(--ih-tech-white);
  color: var(--ih-deep-blue);
  border: 1.5px solid var(--ih-divider);
  font-family: var(--ih-font-body);
  font-weight: 500;
  font-size: 22px;
  border-radius: 14px;
}

/* ─── Display & body utilities ──────────────────────────── */
.display-mono {
  font-family: var(--ih-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.92;
}

/* ─── Pixel-mascot grid system ──────────────────────────── */
/* Each mascot is a CSS grid of square cells. The data is
   a string of 0/1/. characters; we render via pseudo-pixels. */
.pixel {
  display: grid;
  gap: 0;
}
.pixel .px {
  width: 100%;
  aspect-ratio: 1;
}
.pixel .on  { background: currentColor; }
.pixel .off { background: transparent; }

/* ─── Tiny rocket / laptop / sparkles emoji-style accents ─
   Use real emoji, but ensure consistent baseline. */
.emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: inherit;
  line-height: 1;
  display: inline-block;
}

/* ─── Chrome scrollbar hidden inside slides ─────────────── */
.slide::-webkit-scrollbar { display: none; }