/* ============================================================
   IRONHACK Design Tokens — colors + type
   Source: Brand-guide (Figma) + 2026 program decks
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap");

/* Kode Mono — local brand files */
@font-face {
  font-family: "Kode Mono";
  src: url("fonts/KodeMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kode Mono";
  src: url("fonts/KodeMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kode Mono";
  src: url("fonts/KodeMono-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kode Mono";
  src: url("fonts/KodeMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── PRIMARY ─── */
  --ih-deep-blue:      #000543;   /* Corporate dark text/surface */
  --ih-corporate-blue: #0009EA;   /* Solid accent / CTAs */
  --ih-bright-blue:    #2DC5FA;   /* Hex marker / highlights */
  --ih-tech-white:     #F2FBFF;   /* Off-white surface */
  --ih-white:          #FFFFFF;
  --ih-black:          #000000;

  /* ─── SECONDARY ─── */
  --ih-bubblegum:      #FC77EF;   /* Pink — UX/UI */
  --ih-bright-green:   #5AF2A2;   /* Green — Data Analytics */
  --ih-cyber-purple:   #9A16F0;   /* Purple — Cybersecurity */
  --ih-sun-yellow:     #FAF234;   /* Yellow — Bright accent */
  --ih-ocean-teal:     #2BCFC5;   /* Teal — Ocean Blue */
  --ih-pink-deep:      #EC398A;
  --ih-red:            #C71E0F;

  /* ─── NEUTRALS ─── */
  --ih-divider:        #D9DBE9;
  --ih-grey-fog:       #F7F7FB;
  --ih-grey-300:       #C8CADB;
  --ih-grey-700:       #3F3F3F;
  --ih-ink:            #170F49;   /* Deep ink for headings on light */

  /* ─── GRADIENTS ─── */
  --ih-grad-corporate: linear-gradient(135deg, #2CC5FA 0%, #0009EA 100%);
  --ih-grad-webdev:    linear-gradient(135deg, #2CC5FA 0%, #9A16F0 100%);
  --ih-grad-ocean:     linear-gradient(135deg, #2BCFC5 0%, #0009EA 100%);
  --ih-grad-data:      linear-gradient(135deg, #5AF2A2 0%, #2DC5FA 100%);
  --ih-grad-uxui:      linear-gradient(135deg, #FC77EF 0%, #9A16F0 100%);
  --ih-grad-cyber:     linear-gradient(135deg, #FAF234 0%, #EC398A 100%);
  --ih-grad-bubblegum: linear-gradient(135deg, #FC77EF 0%, #FAF234 100%);

  /* ─── TYPE ─── */
  --ih-font-display: "Kode Mono", ui-monospace, "JetBrains Mono", monospace;
  --ih-font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ─────────────────────────────────────────────────────────
     TYPE SCALE — 8-step ladder, ~1.25 ratio (perfect-fourth-ish)
     Roles are explicit; sizes aren't shared between display/body.
     Rule of thumb: pick ONE display + ONE body size per layout.
     ───────────────────────────────────────────────────────── */

  /* Display — Kode Mono 700, all-caps, tight tracking.
     Reserved for hero moments (cover taglines, stat numbers, stickers). */
  --ih-fs-display-2xl: 200px;  --ih-lh-display-2xl: 0.92;  --ih-tr-display-2xl: -0.01em;
  --ih-fs-display-xl:  140px;  --ih-lh-display-xl:  0.95;  --ih-tr-display-xl:  -0.005em;
  --ih-fs-display-lg:  88px;   --ih-lh-display-lg:  1.0;   --ih-tr-display-lg:   0;

  /* Headings — Poppins. Body-set type that carries the page. */
  --ih-fs-h1: 96px;   --ih-lh-h1: 1.02;  --ih-tr-h1: -0.015em;  /* page hero */
  --ih-fs-h2: 64px;   --ih-lh-h2: 1.05;  --ih-tr-h2: -0.012em;  /* section opener */
  --ih-fs-h3: 44px;   --ih-lh-h3: 1.10;  --ih-tr-h3: -0.008em;  /* card / sub-section */
  --ih-fs-h4: 28px;   --ih-lh-h4: 1.25;  --ih-tr-h4: -0.005em;  /* card title / tile heading */
  --ih-fs-h5: 20px;   --ih-lh-h5: 1.30;  --ih-tr-h5:  0;        /* small heading / list lead */

  /* Body — Poppins 400/500. Two sizes, one purpose each. */
  --ih-fs-lead:    24px;  --ih-lh-lead:    1.50;  /* paragraph lead, intro copy */
  --ih-fs-body:    18px;  --ih-lh-body:    1.55;  /* default running text */
  --ih-fs-caption: 14px;  --ih-lh-caption: 1.45;  /* meta, footnote, label */

  /* Eyebrow — Poppins 700, UPPER, wide tracking. ALWAYS paired with H1/H2. */
  --ih-fs-eyebrow:  14px;
  --ih-tr-eyebrow:  0.18em;

  /* Mono accent — Kode Mono 700. Numerals, arrows, codes. */
  --ih-fs-mono-lg:  20px;  --ih-tr-mono-lg: 0.04em;
  --ih-fs-mono:     14px;  --ih-tr-mono:    0.06em;

  /* ─── SPACING (8 px base) ─── */
  --ih-sp-1:  4px;
  --ih-sp-2:  8px;
  --ih-sp-3: 12px;
  --ih-sp-4: 16px;
  --ih-sp-5: 24px;
  --ih-sp-6: 32px;
  --ih-sp-7: 40px;
  --ih-sp-8: 60px;
  --ih-sp-9: 90px;
  --ih-sp-10: 120px;

  /* ─── RADII ─── */
  --ih-r-pill:  999px;
  --ih-r-card:  46px;     /* big page-frame radius */
  --ih-r-tile:  40px;
  --ih-r-md:    16px;
  --ih-r-sm:    10px;
  --ih-r-xs:    8px;

  /* ─── SHADOWS ─── */
  --ih-shadow-soft: 0 8px 32px rgba(0, 5, 67, 0.08);
  --ih-shadow-card: 0 20px 60px rgba(0, 5, 67, 0.12);

  /* Smooth-rounded hexagon mask — used as -webkit-mask / mask on the
     Ironhack brand mark. Defined here so pages that load tokens.css alone
     (home, categories, voting, etc., via shared-page.css) can render the
     hex correctly without depending on shared.css. */
  --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>');
}

/* ─── Type utility classes ─────────────────────────────────
   Use these directly: <h1 class="ih-h1">…</h1>
   ───────────────────────────────────────────────────────── */

.ih-display-2xl,
.ih-display-xl,
.ih-display-lg {
  font-family: var(--ih-font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ih-deep-blue);
  margin: 0;
}
.ih-display-2xl { font-size: var(--ih-fs-display-2xl); line-height: var(--ih-lh-display-2xl); letter-spacing: var(--ih-tr-display-2xl); }
.ih-display-xl  { font-size: var(--ih-fs-display-xl);  line-height: var(--ih-lh-display-xl);  letter-spacing: var(--ih-tr-display-xl);  }
.ih-display-lg  { font-size: var(--ih-fs-display-lg);  line-height: var(--ih-lh-display-lg);  letter-spacing: var(--ih-tr-display-lg);  }

.ih-h1, .ih-h2, .ih-h3, .ih-h4, .ih-h5 {
  font-family: var(--ih-font-body);
  color: var(--ih-deep-blue);
  margin: 0;
}
.ih-h1 { font-size: var(--ih-fs-h1); line-height: var(--ih-lh-h1); letter-spacing: var(--ih-tr-h1); font-weight: 700; }
.ih-h2 { font-size: var(--ih-fs-h2); line-height: var(--ih-lh-h2); letter-spacing: var(--ih-tr-h2); font-weight: 700; }
.ih-h3 { font-size: var(--ih-fs-h3); line-height: var(--ih-lh-h3); letter-spacing: var(--ih-tr-h3); font-weight: 600; }
.ih-h4 { font-size: var(--ih-fs-h4); line-height: var(--ih-lh-h4); letter-spacing: var(--ih-tr-h4); font-weight: 600; }
.ih-h5 { font-size: var(--ih-fs-h5); line-height: var(--ih-lh-h5); letter-spacing: var(--ih-tr-h5); font-weight: 600; }

.ih-lead    { font-family: var(--ih-font-body); font-weight: 400; font-size: var(--ih-fs-lead);    line-height: var(--ih-lh-lead);    color: var(--ih-deep-blue); margin: 0; }
.ih-body    { font-family: var(--ih-font-body); font-weight: 400; font-size: var(--ih-fs-body);    line-height: var(--ih-lh-body);    color: var(--ih-deep-blue); margin: 0; }
.ih-caption { font-family: var(--ih-font-body); font-weight: 400; font-size: var(--ih-fs-caption); line-height: var(--ih-lh-caption); color: var(--ih-grey-700); margin: 0; }

.ih-eyebrow {
  font-family: var(--ih-font-body);
  font-weight: 700;
  font-size: var(--ih-fs-eyebrow);
  letter-spacing: var(--ih-tr-eyebrow);
  text-transform: uppercase;
  color: var(--ih-corporate-blue);
  margin: 0;
}

.ih-mono     { font-family: var(--ih-font-display); font-weight: 700; font-size: var(--ih-fs-mono);    letter-spacing: var(--ih-tr-mono);    text-transform: uppercase; }
.ih-mono-lg  { font-family: var(--ih-font-display); font-weight: 700; font-size: var(--ih-fs-mono-lg); letter-spacing: var(--ih-tr-mono-lg); text-transform: uppercase; }