/* =========================================================================
   Medinnovo — Color & Type Foundations
   Warm editorial, German-flag-inspired, restrained.
   ========================================================================= */

/* ---------- Fonts ---------- */
/* Display serif: Newsreader — warm, editorial, slightly literary
   UI sans:       IBM Plex Sans — restrained, European, technical-premium
   Mono:          IBM Plex Mono — for code, data, captions
   Lokal gehostet (web/fonts/, woff2 latin) — kein Google-Fonts-Request (DSGVO,
   offline-fähige PWA). Sans/Serif sind Variable Fonts (wght-Achse). */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('fonts/IBMPlexSans-normal-var.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/IBMPlexMono-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/IBMPlexMono-normal-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/IBMPlexMono-normal-600.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('fonts/Newsreader-normal-var.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url('fonts/Newsreader-italic-var.woff2') format('woff2'); }

:root {
  /* =====================================================================
     COLORS — Brand
     ===================================================================== */
  --mi-cream:       #F2ECDF;  /* Warm Cream — primary background */
  --mi-cream-2:     #EAE2D0;  /* Slightly deeper cream for nested surfaces */
  --mi-cream-3:     #E3D9C2;  /* Deeper cream for tertiary surfaces */
  --mi-paper:       #FAF6EC;  /* Lightest cream — cards on cream bg */
  --mi-ink:         #1B1A17;  /* Anthracite — primary text & mark */
  --mi-ink-90:      #2A2823;
  --mi-ink-70:      #4A463E;  /* Taupe Ink — secondary text */
  --mi-ink-50:      #7A7468;
  --mi-ink-30:      #B6AE9D;
  --mi-line:        #D9D1BE;  /* Soft Line — dividers, quiet borders */
  --mi-line-strong: #C8BFA8;
  --mi-red:         #B32624;  /* Deep Red — innovation accent */
  --mi-red-deep:    #8E1B19;
  --mi-red-tint:    #F4DAD8;  /* For very light backgrounds, sparingly */
  --mi-gold:        #D4A52F;  /* Muted Gold — progress accent */
  --mi-gold-deep:   #A07D1F;
  --mi-gold-tint:   #F4E6BD;

  /* =====================================================================
     COLORS — Semantic (foreground / background / states)
     ===================================================================== */
  --fg-1:           var(--mi-ink);          /* Primary text */
  --fg-2:           var(--mi-ink-70);       /* Secondary text */
  --fg-3:           var(--mi-ink-50);       /* Tertiary / captions */
  --fg-disabled:    var(--mi-ink-30);
  --fg-accent:      var(--mi-red);
  --fg-on-ink:      var(--mi-cream);        /* Text on dark surfaces */

  --bg-1:           var(--mi-cream);        /* Page bg */
  --bg-2:           var(--mi-paper);        /* Card bg */
  --bg-3:           var(--mi-cream-2);      /* Nested surface */
  --bg-inverse:     var(--mi-ink);
  --bg-accent:      var(--mi-red);

  --border:         var(--mi-line);
  --border-strong:  var(--mi-line-strong);
  --border-focus:   var(--mi-ink);

  --success:        #3F7A4A;
  --warning:        var(--mi-gold-deep);
  --danger:         var(--mi-red);

  /* =====================================================================
     TYPOGRAPHY — base
     ===================================================================== */
  --font-display:   'Newsreader', 'Source Serif 4', Georgia, serif;
  --font-sans:      'IBM Plex Sans', 'Söhne', system-ui, sans-serif;
  --font-mono:      'IBM Plex Mono', 'JetBrains Mono', monospace;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.14em;  /* For all-caps labels */

  /* =====================================================================
     SPACING (8pt base, with 4 half-steps)
     ===================================================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* =====================================================================
     RADII, SHADOWS, BORDERS
     ===================================================================== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --border-w-1: 1px;
  --border-w-2: 1.5px;

  /* Shadows are restrained — warm tinted, low-spread.
     Avoid heavy modern app shadows; this is editorial. */
  --shadow-1: 0 1px 0 rgba(27,26,23,0.04), 0 1px 2px rgba(27,26,23,0.05);
  --shadow-2: 0 1px 0 rgba(27,26,23,0.04), 0 4px 12px rgba(27,26,23,0.06);
  --shadow-3: 0 2px 0 rgba(27,26,23,0.04), 0 12px 32px rgba(27,26,23,0.10);
  --shadow-focus: 0 0 0 3px rgba(27,26,23,0.15);

  /* =====================================================================
     MOTION
     ===================================================================== */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;
}

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

html, body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mi-display {  /* Hero / poster */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-optical-sizing: auto;
}

.mi-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-48);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
}

.mi-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.mi-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.mi-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
}

.mi-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  text-wrap: pretty;
}

.mi-lede {  /* Larger intro paragraph */
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.mi-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--fg-3);
}

.mi-eyebrow {  /* All caps, tracked, used liberally for section labels */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.mi-pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.mi-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: 0;
}

.mi-num {  /* Tabular figures for data */
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 400;
}

a.mi-link {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--mi-line-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-base) var(--ease-standard);
}
a.mi-link:hover { text-decoration-color: var(--mi-red); }

::selection {
  background: var(--mi-gold-tint);
  color: var(--mi-ink);
}