/* ============================================================
   Menkor Design System — Colors & Type
   Based on the Menkor brand (menkor.hu): a Hungarian B2B
   environmental compliance & waste-management consultancy.
   Brand mark is a clean geometric wordmark — "MEN" filled
   in signal-lime, "KOR" in outline. Vibe: clean, technical,
   professional, modern-green.
   ============================================================ */

/* ---------- Fonts ----------
   Single family: **General Sans** (Fontshare, free for commercial use).
   Premium B2B feel — geometric humanist sans, optical refinement at large
   sizes, excellent legibility at body sizes. Used by premium B2B brands
   (e.g. Linear-adjacent, Stripe-adjacent design language) and supports
   Latin Extended (proper Hungarian diacritics: ő, ű, á, é, í, ó, ö, ú, ü).
   One family across display + body keeps the system consistent and
   premium. Mono is JetBrains Mono for regulatory references / KF codes.
*/
@import url("https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand Color (primary signal) ---------- */
  --menkor-lime:        #8FD928;   /* MEN — primary lime, signal/CTA */
  --menkor-lime-600:    #7AC11A;   /* hover */
  --menkor-lime-700:    #5FA10A;   /* pressed / on light */
  --menkor-lime-100:    #E9F8CC;   /* tints, backgrounds */
  --menkor-lime-50:     #F4FCE3;   /* subtle wash */

  /* ---------- Neutrals (ink + paper) ---------- */
  --ink-900:            #0E1411;   /* near-black, text */
  --ink-800:            #1B2420;   /* primary text */
  --ink-700:            #2D3A33;   /* headings on light */
  --ink-500:            #5E6C64;   /* secondary text */
  --ink-400:            #8A968F;   /* tertiary / placeholder */
  --ink-300:            #BFC8C2;   /* hairline */
  --ink-200:            #DFE5E1;   /* borders */
  --ink-100:            #EFF2EE;   /* surface raised */
  --ink-50:             #F7F8F6;   /* page wash */
  --paper:              #FFFFFF;   /* base */

  /* ---------- Dark surface (footer, hero overlays) ---------- */
  --slate-900:          #0F1A14;
  --slate-800:          #16241D;
  --slate-700:          #1F3328;
  --on-slate-1:         #FFFFFF;
  --on-slate-2:         #C9D3CD;
  --on-slate-3:         #7E8A84;

  /* ---------- Semantic ---------- */
  --success:            #2F9E44;
  --warning:            #E8A317;
  --danger:             #D14343;
  --info:               #2D7DD9;

  /* ---------- Typography stacks ---------- */
  --font-display:       "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:          "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:          "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- Type scale (1.250 major third) ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;
  --fs-6xl:   80px;

  --lh-tight:    1.08;
  --lh-snug:     1.22;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

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

  /* ---------- Radii ---------- */
  --r-xs:    4px;
  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    16px;
  --r-xl:    24px;
  --r-pill:  999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(14, 20, 17, 0.06);
  --shadow-sm: 0 2px 6px rgba(14, 20, 17, 0.06), 0 1px 2px rgba(14, 20, 17, 0.04);
  --shadow-md: 0 8px 20px rgba(14, 20, 17, 0.08), 0 2px 6px rgba(14, 20, 17, 0.04);
  --shadow-lg: 0 18px 40px rgba(14, 20, 17, 0.10), 0 4px 10px rgba(14, 20, 17, 0.05);
  --shadow-lime: 0 10px 28px rgba(143, 217, 40, 0.35);

  /* ---------- Semantic foreground/background tokens ---------- */
  --fg-1: var(--ink-800);
  --fg-2: var(--ink-500);
  --fg-3: var(--ink-400);
  --fg-on-brand: var(--ink-900);
  --fg-on-slate: var(--on-slate-1);

  --bg-1: var(--paper);
  --bg-2: var(--ink-50);
  --bg-3: var(--ink-100);
  --bg-brand: var(--menkor-lime);
  --bg-brand-soft: var(--menkor-lime-100);
  --bg-slate: var(--slate-900);

  --border-1: var(--ink-200);
  --border-2: var(--ink-300);
  --border-strong: var(--ink-700);
}

/* ============================================================
   Semantic type styles — apply directly to elements
   ============================================================ */

/* General Sans tops out at weight 700; display sizes use 700 with tight tracking. */
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--menkor-lime-700);
}
.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}
.small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.micro {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--fg-2);
}
.code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-100);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  color: var(--ink-800);
}
.label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--fg-1);
}