/* =========================================================
   Manacor — Core tokens
   Source: Manacor_Logo_Mini-Styleguide.pdf (Nov 2025)
   ========================================================= */

/* Inter (body) + Poppins (display) — self-hosted, subsetted WOFF2 (nur genutzte Schnitte) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Variable.woff2') format('woff2');
}
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/Poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/Poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fonts/Poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('fonts/Poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800;
  font-display: swap; src: url('fonts/Poppins-800.woff2') format('woff2'); }

:root {
  /* ---------- Brand palette (authoritative from styleguide) ---------- */
  --mc-dunkelgruen: #07513D;   /* Leitfarbe — primary */
  --mc-smaragd:    #2FA27A;    /* Akzent — accent */
  --mc-grau:       #575756;    /* Typo — body grey */

  /* Tints / shades derived harmonically for UI needs */
  --mc-dunkelgruen-900: #053024;
  --mc-dunkelgruen-800: #064030;
  --mc-dunkelgruen-700: #07513D;  /* == brand */
  --mc-dunkelgruen-600: #0d6a50;

  --mc-smaragd-600: #24805f;
  --mc-smaragd-500: #2FA27A;      /* == brand */
  --mc-smaragd-400: #5bbd99;
  --mc-smaragd-300: #8fd5b9;
  --mc-smaragd-200: #c1e8d8;
  --mc-smaragd-100: #e5f4ec;
  --mc-smaragd-50:  #f2faf6;

  --mc-grau-900: #1f1f1f;
  --mc-grau-800: #2e2e2d;
  --mc-grau-700: #575756;        /* == brand typo */
  --mc-grau-600: #7a7a79;
  --mc-grau-500: #9a9a99;
  --mc-grau-400: #bdbdbc;
  --mc-grau-300: #d8d8d7;
  --mc-grau-200: #ececec;
  --mc-grau-100: #f4f4f3;
  --mc-grau-50:  #fafaf9;

  --mc-white: #ffffff;
  --mc-black: #111111;

  /* Semantic UI signals (kept in-family with the green) */
  --mc-success: #2FA27A;
  --mc-warning: #d99b2c;
  --mc-danger:  #c44b4b;
  --mc-info:    #3a7aa8;

  /* ---------- Surfaces / foreground tokens ---------- */
  --bg:        var(--mc-white);
  --bg-soft:   var(--mc-grau-50);
  --bg-muted:  var(--mc-grau-100);
  --bg-invert: var(--mc-dunkelgruen-700);

  --fg1: var(--mc-dunkelgruen-900);     /* primary text — headings */
  --fg2: var(--mc-grau-700);            /* body */
  --fg3: var(--mc-grau-600);            /* meta / captions */
  --fg4: var(--mc-grau-500);            /* disabled */

  --line:      var(--mc-grau-200);
  --line-soft: var(--mc-grau-100);
  --line-strong: var(--mc-grau-300);

  /* Brand gradient (logo + hero) — matches the Icon_Gradient.png
     (top-left smaragd → bottom-right dunkelgrün) */
  --mc-gradient: linear-gradient(135deg, #2FA27A 0%, #07513D 100%);
  --mc-gradient-soft: linear-gradient(135deg, #e5f4ec 0%, #c1e8d8 100%);

  /* ---------- Type families ---------- */
  /* Poppins: closest Google Font match to the logo wordmark
     (rounded geometric, ascender-balanced 'a/c/o'). */
  --font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type scale (1.25 major third) ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

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

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadows (low, natural — this brand avoids heavy drop shadows) ---------- */
  --shadow-xs: 0 1px 2px rgba(7, 81, 61, 0.05);
  --shadow-sm: 0 2px 6px rgba(7, 81, 61, 0.06), 0 1px 2px rgba(7, 81, 61, 0.04);
  --shadow-md: 0 8px 24px rgba(7, 81, 61, 0.08), 0 2px 6px rgba(7, 81, 61, 0.04);
  --shadow-lg: 0 20px 40px rgba(7, 81, 61, 0.10), 0 6px 12px rgba(7, 81, 61, 0.05);
  --shadow-ring: 0 0 0 3px rgba(47, 162, 122, 0.25);
}

/* =========================================================
   Semantic type styles
   ========================================================= */

.h-display,
h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0 0 var(--s-4);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0 0 var(--s-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0 0 var(--s-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0 0 var(--s-2);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--mc-smaragd-600);
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.small, small {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg3);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg3);
  letter-spacing: 0.02em;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  padding: 0.1em 0.4em;
  border-radius: var(--r-xs);
  color: var(--fg1);
}

a {
  color: var(--mc-dunkelgruen-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--mc-smaragd-400);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
a:hover {
  color: var(--mc-smaragd-500);
  text-decoration-color: var(--mc-smaragd-500);
}

/* Base reset helpers */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--fg2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}