/* =================================================================
   Mobile Hacking Lab — Design Tokens
   Color, Type, Spacing, Radii, Shadows + semantic component classes.
   ================================================================= */

/* Fonts (Google Fonts substitutes — see README "Type" section) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Source+Serif+4:wght@400;600&display=swap');

:root {
  /* ---------- Brand color ---------- */
  --mhl-mint:        #5CE5C2;   /* primary accent — certificate title, CTAs, links */
  --mhl-mint-600:    #3FCFA8;   /* hover */
  --mhl-mint-700:    #28B591;   /* press */
  --mhl-mint-100:    #DAFBF1;   /* tints, badge bg on light */
  --mhl-mint-glow:   rgba(92, 229, 194, 0.35);

  /* ---------- Dark surfaces (hero, app chrome) ---------- */
  --mhl-ink:         #060B19;   /* deepest — page bg on dark */
  --mhl-navy:        #0B1428;   /* primary dark surface */
  --mhl-navy-2:      #112038;   /* raised dark surface */
  --mhl-navy-3:      #1A2D4D;   /* card-on-dark */
  --mhl-navy-stroke: rgba(255, 255, 255, 0.08);

  /* ---------- Light surfaces (body content) ---------- */
  --mhl-white:       #FFFFFF;
  --mhl-paper:       #F5F7FA;   /* alt body bg */
  --mhl-line:        #E4E8EE;   /* hairline border on light */
  --mhl-line-strong: #C9D2DE;

  /* ---------- Foreground (semantic) ---------- */
  --mhl-fg-strong:   #0B1428;   /* primary text on light */
  --mhl-fg:          #1F2A40;   /* default text on light */
  --mhl-fg-muted:    #5A6781;   /* secondary text on light */
  --mhl-fg-subtle:   #8A93A6;   /* tertiary text on light */

  --mhl-fg-on-dark-strong: #FFFFFF;
  --mhl-fg-on-dark:        #D8DEEA;
  --mhl-fg-on-dark-muted:  #8A93A6;

  /* ---------- Semantic / state ---------- */
  --mhl-success:     #5CE5C2;   /* same as mint */
  --mhl-warning:     #F5A524;   /* used very sparingly */
  --mhl-danger:      #F25268;   /* exploit / red-team accents */
  --mhl-danger-bg:   #2A0F18;
  --mhl-info:        #6BA8FF;

  /* ---------- Type ---------- */
  --mhl-font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mhl-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mhl-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --mhl-font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Type scale (1.25 ratio, 16px base) */
  --mhl-text-xs:   12px;
  --mhl-text-sm:   14px;
  --mhl-text-base: 16px;
  --mhl-text-md:   18px;
  --mhl-text-lg:   20px;
  --mhl-text-xl:   24px;
  --mhl-text-2xl:  32px;
  --mhl-text-3xl:  40px;
  --mhl-text-4xl:  56px;
  --mhl-text-5xl:  72px;
  --mhl-text-6xl:  96px;

  /* Line heights */
  --mhl-lh-tight:   1.05;
  --mhl-lh-snug:    1.2;
  --mhl-lh-normal:  1.5;
  --mhl-lh-relaxed: 1.65;

  /* Letter spacing */
  --mhl-tracking-tight:  -0.02em;
  --mhl-tracking-snug:   -0.01em;
  --mhl-tracking-normal: 0;
  --mhl-tracking-wide:   0.04em;
  --mhl-tracking-eyebrow: 0.18em;  /* ALL-CAPS kicker labels */

  /* ---------- Spacing (4px grid) ---------- */
  --mhl-s-1:  4px;
  --mhl-s-2:  8px;
  --mhl-s-3:  12px;
  --mhl-s-4:  16px;
  --mhl-s-5:  20px;
  --mhl-s-6:  24px;
  --mhl-s-8:  32px;
  --mhl-s-10: 40px;
  --mhl-s-12: 48px;
  --mhl-s-16: 64px;
  --mhl-s-20: 80px;
  --mhl-s-24: 96px;
  --mhl-s-32: 128px;

  /* ---------- Radii ---------- */
  --mhl-r-0:    0px;     /* certificate, brutalist edges */
  --mhl-r-sm:   4px;     /* inputs, code chips */
  --mhl-r-md:   8px;     /* default — buttons, fields */
  --mhl-r-lg:   12px;    /* cards */
  --mhl-r-xl:   16px;    /* feature cards (max) */
  --mhl-r-pill: 999px;   /* badges, pills */

  /* ---------- Shadows / glow ---------- */
  --mhl-shadow-xs:    0 1px 2px rgba(15, 37, 70, 0.06);
  --mhl-shadow-sm:    0 1px 2px rgba(15, 37, 70, 0.06), 0 4px 12px rgba(15, 37, 70, 0.06);
  --mhl-shadow-md:    0 1px 2px rgba(15, 37, 70, 0.06), 0 8px 24px rgba(15, 37, 70, 0.08);
  --mhl-shadow-lg:    0 8px 16px rgba(15, 37, 70, 0.08), 0 24px 48px rgba(15, 37, 70, 0.12);
  /* Dark-mode prefers glow over shadow */
  --mhl-glow-mint:    0 0 0 1px rgba(92, 229, 194, 0.45), 0 0 32px rgba(92, 229, 194, 0.22);
  --mhl-glow-mint-sm: 0 0 0 1px rgba(92, 229, 194, 0.35), 0 0 12px rgba(92, 229, 194, 0.18);

  /* ---------- Motion ---------- */
  --mhl-ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --mhl-ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --mhl-dur-fast:  140ms;
  --mhl-dur:       240ms;
  --mhl-dur-slow:  320ms;

  /* ---------- Layout ---------- */
  --mhl-content-max: 1200px;
  --mhl-hero-max:    1320px;
}

/* =================================================================
   Semantic class layer — drop-in styles for designs
   ================================================================= */

.mhl-h1, .mhl-h2, .mhl-h3, .mhl-h4 {
  font-family: var(--mhl-font-display);
  color: var(--mhl-fg-strong);
  margin: 0;
  font-weight: 700;
  letter-spacing: var(--mhl-tracking-tight);
  line-height: var(--mhl-lh-tight);
}
.mhl-h1 { font-size: clamp(40px, 6vw, var(--mhl-text-5xl)); }
.mhl-h2 { font-size: clamp(32px, 4.5vw, var(--mhl-text-3xl)); font-weight: 600; line-height: var(--mhl-lh-snug); }
.mhl-h3 { font-size: var(--mhl-text-2xl); font-weight: 600; line-height: var(--mhl-lh-snug); }
.mhl-h4 { font-size: var(--mhl-text-xl); font-weight: 600; line-height: var(--mhl-lh-snug); }

.mhl-eyebrow {
  font-family: var(--mhl-font-mono);
  font-size: var(--mhl-text-xs);
  letter-spacing: var(--mhl-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mhl-mint);
  font-weight: 500;
}

.mhl-body {
  font-family: var(--mhl-font-body);
  font-size: var(--mhl-text-base);
  line-height: var(--mhl-lh-relaxed);
  color: var(--mhl-fg);
}
.mhl-body-lg { font-size: var(--mhl-text-md); line-height: var(--mhl-lh-relaxed); }
.mhl-body-sm { font-size: var(--mhl-text-sm); line-height: var(--mhl-lh-normal); color: var(--mhl-fg-muted); }

.mhl-mono, .mhl-code {
  font-family: var(--mhl-font-mono);
  font-size: 0.92em;
}
.mhl-code {
  background: rgba(92, 229, 194, 0.12);
  color: var(--mhl-mint-700);
  padding: 2px 6px;
  border-radius: var(--mhl-r-sm);
  border: 1px solid rgba(92, 229, 194, 0.25);
}
/* Code on dark surfaces */
.mhl-on-dark .mhl-code {
  color: var(--mhl-mint);
  background: rgba(92, 229, 194, 0.08);
  border-color: rgba(92, 229, 194, 0.3);
}

.mhl-serif { font-family: var(--mhl-font-serif); }

/* Buttons --------------------------------------------------------- */
.mhl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mhl-font-display);
  font-weight: 600;
  font-size: var(--mhl-text-sm);
  letter-spacing: var(--mhl-tracking-snug);
  padding: 12px 20px;
  border-radius: var(--mhl-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--mhl-dur-fast) var(--mhl-ease),
              background var(--mhl-dur) var(--mhl-ease),
              box-shadow var(--mhl-dur) var(--mhl-ease),
              border-color var(--mhl-dur) var(--mhl-ease);
  text-decoration: none;
}
.mhl-btn:active { transform: scale(0.98); }

.mhl-btn-primary {
  background: var(--mhl-mint);
  color: var(--mhl-ink);
}
.mhl-btn-primary:hover {
  background: var(--mhl-mint-600);
  box-shadow: var(--mhl-glow-mint-sm);
}

.mhl-btn-secondary {
  background: transparent;
  color: var(--mhl-fg-strong);
  border-color: var(--mhl-line-strong);
}
.mhl-btn-secondary:hover { border-color: var(--mhl-fg-strong); }

.mhl-on-dark .mhl-btn-secondary {
  color: var(--mhl-fg-on-dark-strong);
  border-color: var(--mhl-navy-stroke);
}
.mhl-on-dark .mhl-btn-secondary:hover { border-color: var(--mhl-mint); color: var(--mhl-mint); }

.mhl-btn-ghost {
  background: transparent;
  color: var(--mhl-mint);
  padding: 8px 4px;
}
.mhl-btn-ghost:hover { color: var(--mhl-mint-600); }

/* Cards ----------------------------------------------------------- */
.mhl-card {
  background: var(--mhl-white);
  border: 1px solid var(--mhl-line);
  border-radius: var(--mhl-r-lg);
  box-shadow: var(--mhl-shadow-sm);
  padding: var(--mhl-s-6);
}
.mhl-card-dark {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--mhl-navy-stroke);
  border-radius: var(--mhl-r-lg);
  padding: var(--mhl-s-6);
  color: var(--mhl-fg-on-dark);
  transition: border-color var(--mhl-dur) var(--mhl-ease), box-shadow var(--mhl-dur) var(--mhl-ease);
}
.mhl-card-dark:hover {
  border-color: rgba(92, 229, 194, 0.5);
  box-shadow: var(--mhl-glow-mint-sm);
}

/* Badges ---------------------------------------------------------- */
.mhl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mhl-font-mono);
  font-size: var(--mhl-text-xs);
  font-weight: 500;
  letter-spacing: var(--mhl-tracking-wide);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--mhl-r-pill);
  background: var(--mhl-mint-100);
  color: var(--mhl-mint-700);
  border: 1px solid rgba(92, 229, 194, 0.4);
}
.mhl-badge-dark {
  background: rgba(92, 229, 194, 0.1);
  color: var(--mhl-mint);
  border: 1px solid rgba(92, 229, 194, 0.3);
}
.mhl-badge-danger {
  background: rgba(242, 82, 104, 0.12);
  color: var(--mhl-danger);
  border: 1px solid rgba(242, 82, 104, 0.3);
}

/* Surfaces -------------------------------------------------------- */
.mhl-surface-dark {
  background: var(--mhl-navy);
  color: var(--mhl-fg-on-dark);
}
.mhl-surface-ink {
  background: var(--mhl-ink);
  color: var(--mhl-fg-on-dark);
}
.mhl-surface-paper {
  background: var(--mhl-paper);
  color: var(--mhl-fg);
}

/* Links ----------------------------------------------------------- */
.mhl-link {
  color: var(--mhl-mint-700);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--mhl-dur) var(--mhl-ease);
}
.mhl-link:hover { color: var(--mhl-mint-600); }
.mhl-on-dark .mhl-link { color: var(--mhl-mint); }
.mhl-on-dark .mhl-link:hover { color: var(--mhl-mint-100); }

/* Reset helpers --------------------------------------------------- */
.mhl-reset {
  margin: 0; padding: 0;
  font-family: var(--mhl-font-body);
  color: var(--mhl-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}