/* ============================================================
   MiraNext Design System — Colors & Type
   ------------------------------------------------------------
   v2 · Grounded in real source material:
     - Design System Briefing (consolidated brand spec)
     - Produktflyer Ausgabe 2026 (8-page A4)
     - MiraNext Folder Layout 06 (launch folder)

   Palette anchor: Navy + Teal + Gold on warm Paper.
   "European engineering, patient-data sovereignty."
   ============================================================ */

/* Bunny Fonts: GDPR-compliant EU-hosted mirror of Google Fonts.
   Swapped 2026-05-20 — addresses LG-München 3 O 17493/20 (Aug 2022) ruling
   that hot-linking Google Fonts without consent is unzulässig under DSGVO. */
@import url('https://fonts.bunny.net/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- PRIMARY · NAVY (institutional, engineering) ---------- */
  --mn-navy-950: #050F1F;
  --mn-navy-900: #081A30;
  --mn-navy-800: #0B2545;   /* ★ PRIMARY — logo, headlines, hero */
  --mn-navy-700: #13345F;
  --mn-navy-600: #1D4578;
  --mn-navy-500: #3560A0;
  --mn-navy-400: #5E85BE;
  --mn-navy-300: #95B0D3;
  --mn-navy-200: #C8D5E6;
  --mn-navy-100: #E5EBF3;
  --mn-navy-50:  #F3F6FB;

  /* ---------- ACCENT · TEAL (CTAs, kickers, data viz) ---------- */
  --mn-teal-900: #0A5E57;
  --mn-teal-800: #0E8579;
  --mn-teal-700: #13B5A6;   /* ★ ACCENT — kickers, CTAs */
  --mn-teal-600: #3DC4B8;
  --mn-teal-500: #6FD4CB;
  --mn-teal-300: #B8E9E3;
  --mn-teal-100: #E1F5F3;
  --mn-teal-50:  #F1FAF8;

  /* ---------- ACCENT · GOLD (premium hairlines, restraint only) ---------- */
  --mn-gold-900: #6B5730;
  --mn-gold-700: #9B8048;
  --mn-gold-500: #C9A86A;   /* ★ GOLD — 0.8pt rules, small marks */
  --mn-gold-300: #E1CB9C;
  --mn-gold-100: #F4EBD4;
  --mn-gold-50:  #FAF5E7;

  /* ---------- PAPER & INK ---------- */
  --mn-paper:    #FDFCF9;   /* ★ document / page bg — warm off-white */
  --mn-ink:      #1A1A1A;   /* body text */
  --mn-muted:    #5B6472;   /* secondary text, metadata */
  --mn-rule:     #D8D4CC;   /* dividers, borders */

  /* ---------- NEUTRALS (functional surfaces) ---------- */
  --mn-surface:        #FFFFFF;
  --mn-surface-alt:    #F5F6F8;   /* table rows, subtle bg */
  --mn-surface-sunken: #EEF0F3;
  --mn-border-mid:     #D0D4DA;   /* table borders, disabled */
  --mn-border-dark:    #4A4F5A;   /* strong rules */
  --mn-grey-900:       #1A1A1A;
  --mn-grey-800:       #2A2E36;
  --mn-grey-700:       #3A414B;
  --mn-grey-600:       #4A4F5A;
  --mn-grey-500:       #5B6472;
  --mn-grey-400:       #7D8591;
  --mn-grey-300:       #A8AEB8;
  --mn-grey-200:       #D0D4DA;
  --mn-grey-100:       #E5E7EB;
  --mn-grey-50:        #F5F6F8;

  /* ---------- SEMANTIC STATUS (muted, institutional) ---------- */
  --mn-success-fg:  #1A5C2A;
  --mn-success-bg:  #E6F4EB;
  --mn-warning-fg:  #7A5000;
  --mn-warning-bg:  #FFF8E6;
  --mn-critical-fg: #8B1A1A;
  --mn-critical-bg: #FDEAEA;
  --mn-info-fg:     #3D1A6E;
  --mn-info-bg:     #F0EBF8;

  /* ---------- SEMANTIC TOKENS (use these in components) ---------- */
  --mn-bg-canvas:    var(--mn-paper);
  --mn-bg-surface:   var(--mn-surface);
  --mn-bg-sunken:    var(--mn-surface-alt);
  --mn-bg-invert:    var(--mn-navy-800);
  --mn-bg-brand:     var(--mn-navy-800);
  --mn-bg-accent:    var(--mn-teal-700);

  --mn-fg-1:         var(--mn-ink);
  --mn-fg-2:         var(--mn-grey-700);
  --mn-fg-3:         var(--mn-muted);
  --mn-fg-4:         var(--mn-grey-400);
  --mn-fg-brand:     var(--mn-navy-800);
  --mn-fg-accent:    var(--mn-teal-800);
  --mn-fg-on-brand:  #ffffff;
  --mn-fg-on-accent: #ffffff;
  --mn-fg-on-invert: var(--mn-navy-100);

  --mn-border-subtle:  var(--mn-rule);
  --mn-border-default: var(--mn-border-mid);
  --mn-border-strong:  var(--mn-border-dark);
  --mn-border-focus:   var(--mn-teal-700);
  --mn-border-gold:    var(--mn-gold-500);

  /* ============================================================
     TYPE
     ------------------------------------------------------------
     Brief calls Helvetica as current production, Inter (or Söhne)
     as candidate upgrade. We use Inter here — excellent German
     glyph coverage, wide weight range, tabular figures, open
     licensing. Helvetica remains the fallback in the stack.
     ============================================================ */
  --mn-font-sans:   'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mn-font-display: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mn-font-mono:   'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Size scale — formalised from the flyer (8 / 10 / 22 / 30 pt)
     into a UI scale with named tokens. 16px base for web. */
  --mn-text-2xs: 11px;
  --mn-text-xs:  12px;
  --mn-text-sm:  14px;
  --mn-text-base: 16px;
  --mn-text-md:  18px;
  --mn-text-lg:  20px;
  --mn-text-xl:  24px;
  --mn-text-2xl: 32px;
  --mn-text-3xl: 40px;
  --mn-text-4xl: 48px;
  --mn-text-5xl: 64px;

  --mn-leading-tight:   1.1;
  --mn-leading-snug:    1.25;
  --mn-leading-normal:  1.45;
  --mn-leading-relaxed: 1.6;

  --mn-weight-regular:  400;
  --mn-weight-medium:   500;
  --mn-weight-semibold: 600;
  --mn-weight-bold:     700;

  --mn-tracking-tight:  -0.02em;
  --mn-tracking-snug:   -0.01em;
  --mn-tracking-normal: 0;
  --mn-tracking-wide:   0.04em;
  --mn-tracking-caps:   0.14em;    /* spaced caps for "DATENHOHEIT · VERTRAULICHKEIT" */

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

  /* ---------- RADII (restrained — institutional) ---------- */
  --mn-radius-xs:  2px;
  --mn-radius-sm:  4px;
  --mn-radius-md:  6px;
  --mn-radius-lg:  10px;
  --mn-radius-xl:  14px;
  --mn-radius-pill: 999px;

  /* ---------- ELEVATION (subtle — borders preferred) ---------- */
  --mn-shadow-xs: 0 1px 1px rgba(11, 37, 69, 0.04);
  --mn-shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06), 0 1px 3px rgba(11, 37, 69, 0.04);
  --mn-shadow-md: 0 4px 10px -2px rgba(11, 37, 69, 0.07), 0 2px 6px -1px rgba(11, 37, 69, 0.04);
  --mn-shadow-lg: 0 16px 32px -8px rgba(11, 37, 69, 0.12), 0 4px 10px -2px rgba(11, 37, 69, 0.06);
  --mn-shadow-focus: 0 0 0 3px rgba(19, 181, 166, 0.32);

  /* ---------- HAIRLINES (signature gold rules) ---------- */
  --mn-hairline-gold: 1px solid var(--mn-gold-500);
  --mn-hairline-teal: 1px solid var(--mn-teal-700);

  /* ---------- MOTION ---------- */
  --mn-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --mn-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --mn-dur-fast: 120ms;
  --mn-dur-base: 200ms;
  --mn-dur-slow: 320ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.mn-display {
  font-family: var(--mn-font-display);
  font-size: var(--mn-text-5xl);
  line-height: var(--mn-leading-tight);
  letter-spacing: var(--mn-tracking-tight);
  font-weight: var(--mn-weight-bold);
  color: var(--mn-fg-brand);
}

.mn-h1 {
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-4xl);
  line-height: var(--mn-leading-tight);
  letter-spacing: var(--mn-tracking-tight);
  font-weight: var(--mn-weight-bold);
  color: var(--mn-fg-brand);
}
.mn-h2 {
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-2xl);
  line-height: var(--mn-leading-snug);
  letter-spacing: var(--mn-tracking-snug);
  font-weight: var(--mn-weight-regular);
  color: var(--mn-fg-brand);
}
.mn-h3 {
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-xl);
  line-height: var(--mn-leading-snug);
  font-weight: var(--mn-weight-semibold);
  color: var(--mn-fg-brand);
}
.mn-h4 {
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-lg);
  line-height: var(--mn-leading-snug);
  font-weight: var(--mn-weight-semibold);
  color: var(--mn-fg-1);
}

.mn-body {
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-base);
  line-height: var(--mn-leading-relaxed);
  font-weight: var(--mn-weight-regular);
  color: var(--mn-fg-1);
}
.mn-body-sm {
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-sm);
  line-height: var(--mn-leading-normal);
  color: var(--mn-fg-2);
}
.mn-caption {
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-xs);
  line-height: var(--mn-leading-normal);
  color: var(--mn-fg-3);
}

/* SIGNATURE: spaced-caps kickers ("06 · SECURITY & COMPLIANCE",
   "DATENHOHEIT · VERTRAULICHKEIT · VERFÜGBARKEIT") */
.mn-kicker {
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-2xs);
  font-weight: var(--mn-weight-bold);
  letter-spacing: var(--mn-tracking-caps);
  text-transform: uppercase;
  color: var(--mn-fg-accent);
}

.mn-kicker-navy {
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-2xs);
  font-weight: var(--mn-weight-bold);
  letter-spacing: var(--mn-tracking-caps);
  text-transform: uppercase;
  color: var(--mn-fg-brand);
}

.mn-label {
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-xs);
  font-weight: var(--mn-weight-medium);
  letter-spacing: var(--mn-tracking-wide);
  text-transform: uppercase;
  color: var(--mn-fg-3);
}

.mn-code, code {
  font-family: var(--mn-font-mono);
  font-size: var(--mn-text-sm);
  background: var(--mn-bg-sunken);
  padding: 1px 6px;
  border-radius: var(--mn-radius-xs);
  color: var(--mn-fg-1);
}