/* =====================================================================
   MISSION MEDIZIN — DESIGN TOKENS
   Version 1.0 · Stand August 2026
   Vollständige CSS-Variablen für Web, WordPress und LMS.
   Reihenfolge: Primitive → Semantische Rollen → Typografie → Layout → Motion
   ===================================================================== */

:root {

  /* ------------------------------------------------------------------
     1 · PRIMITIVE FARBEN
     Perzeptuell gleichmäßig in OKLCH gerechnet.
     Markenfarben liegen exakt auf einer Stufe: Vermilion 500, Navy 900.
     ------------------------------------------------------------------ */

  /* Vermilion — Akzent, Signal, Aktion (Hue 34,7°) */
  --mm-vermilion-50:  #FFF4F2;
  --mm-vermilion-100: #FFE7E1;
  --mm-vermilion-200: #FFCEC1;
  --mm-vermilion-300: #FFAD98;
  --mm-vermilion-400: #FF8365;
  --mm-vermilion-500: #FF4203;  /* MARKENFARBE — Fläche/Signal, nie Text */
  --mm-vermilion-600: #D63500;  /* Aktionsstufe — Buttons, Links (4,81:1) */
  --mm-vermilion-700: #AB2800;  /* Hover (6,92:1) */
  --mm-vermilion-800: #821C00;
  --mm-vermilion-900: #5C1100;
  --mm-vermilion-950: #400800;

  /* Navy — Text, Struktur, dunkle Flächen (Hue 255,8°) */
  --mm-navy-50:  #F4F7FB;
  --mm-navy-100: #E9EEF5;
  --mm-navy-200: #D4DDE9;
  --mm-navy-300: #BCC8D8;
  --mm-navy-400: #A2B0C2;
  --mm-navy-500: #8796A9;
  --mm-navy-600: #6B7A8E;  /* funktionale Ränder — nicht für Fließtext */
  --mm-navy-700: #4F5E72;  /* Sekundärtext (6,61:1) */
  --mm-navy-800: #374557;
  --mm-navy-900: #232F3F;  /* MARKENFARBE — Fließtext (13,55:1) */
  --mm-navy-950: #141D29;

  /* Sand — warmes Papier, Flächen, Ränder (Hue 72°) */
  --mm-sand-50:  #FDF9F4;
  --mm-sand-100: #F9F3EB;
  --mm-sand-200: #EFE6DC;
  --mm-sand-300: #DFD5C9;
  --mm-sand-400: #CAC0B3;
  --mm-sand-500: #B1A89C;
  --mm-sand-600: #968D83;
  --mm-sand-700: #787168;
  --mm-sand-800: #5A554E;
  --mm-sand-900: #3E3A35;
  --mm-sand-950: #292623;

  /* Semantik — bewusst weit vom Marken-Hue entfernt */
  --mm-success-100: #DFF3E2;
  --mm-success-500: #3A874F;
  --mm-success-600: #246E3A;
  --mm-success-700: #15572B;
  --mm-danger-100:  #FFE3E4;
  --mm-danger-500:  #AF2841;
  --mm-danger-600:  #951532;   /* tiefes Karmin — trennt sich per Helligkeit */
  --mm-danger-700:  #780A25;
  --mm-warning-100: #FBEDD1;
  --mm-warning-500: #DCA81C;
  --mm-warning-600: #B88A00;
  --mm-warning-700: #8C6800;
  --mm-info-100:    #DFEFFF;
  --mm-info-500:    #1178C4;
  --mm-info-600:    #0061A2;
  --mm-info-700:    #004A7E;

  /* Fachfarben — NUR Print, Cover, Buchrücken, Kapitelnummer. Nie im UI. */
  --mm-subject-bio:   #2E6B4F;
  --mm-subject-chem:  #1F5F7A;
  --mm-subject-phys:  #45457F;
  --mm-subject-math:  #6E5A2E;


  /* ------------------------------------------------------------------
     2 · SEMANTISCHE ROLLEN
     Im Produkt wird ausschließlich mit diesen gearbeitet,
     nie direkt mit den Primitiven aus Abschnitt 1.
     ------------------------------------------------------------------ */

  --mm-color-brand:          var(--mm-vermilion-500);
  --mm-color-brand-action:   var(--mm-vermilion-600);
  --mm-color-brand-strong:   var(--mm-vermilion-700);
  --mm-color-brand-wash:     var(--mm-vermilion-50);

  --mm-color-ink:            var(--mm-navy-900);
  --mm-color-ink-secondary:  var(--mm-navy-700);
  --mm-color-ink-muted:      var(--mm-navy-600);
  --mm-color-ink-inverse:    var(--mm-sand-50);

  --mm-color-surface:          #FFFFFF;
  --mm-color-surface-paper:    var(--mm-sand-50);
  --mm-color-surface-subtle:   var(--mm-sand-100);
  --mm-color-surface-inverse:  var(--mm-navy-900);

  --mm-color-border:         var(--mm-sand-200);
  --mm-color-border-strong:  var(--mm-navy-600);

  --mm-color-success:        var(--mm-success-600);
  --mm-color-success-wash:   var(--mm-success-100);
  --mm-color-danger:         var(--mm-danger-600);
  --mm-color-danger-wash:    var(--mm-danger-100);
  --mm-color-warning:        var(--mm-warning-700);
  --mm-color-warning-wash:   var(--mm-warning-100);
  --mm-color-info:           var(--mm-info-600);
  --mm-color-info-wash:      var(--mm-info-100);

  --mm-focus-ring: 0 0 0 3px rgba(255, 66, 3, 0.30);


  /* ------------------------------------------------------------------
     3 · TYPOGRAFIE
     Alle vier Familien stehen unter der SIL Open Font License.
     ------------------------------------------------------------------ */

  --mm-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mm-font-prose:   "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --mm-font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mm-font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

  --mm-text-display: 3.75rem;  /* 60 px */
  --mm-text-h1:      2.625rem; /* 42 px */
  --mm-text-h2:      2rem;     /* 32 px */
  --mm-text-h3:      1.5625rem;/* 25 px */
  --mm-text-h4:      1.25rem;  /* 20 px */
  --mm-text-h5:      1.0625rem;/* 17 px */
  --mm-text-lead:    1.3125rem;/* 21 px */
  --mm-text-prose:   1.1875rem;/* 19 px — die Lesestrecke */
  --mm-text-body:    1rem;     /* 16 px */
  --mm-text-small:   0.875rem; /* 14 px */
  --mm-text-caption: 0.8125rem;/* 13 px */
  --mm-text-label:   0.75rem;  /* 12 px */

  --mm-leading-tight:   1.04;
  --mm-leading-heading: 1.16;
  --mm-leading-snug:    1.32;
  --mm-leading-normal:  1.55;
  --mm-leading-prose:   1.68;  /* Fließtext — bewusst großzügig */

  --mm-tracking-display: -0.022em;
  --mm-tracking-heading: -0.014em;
  --mm-tracking-normal:  0;
  --mm-tracking-label:   0.07em;

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


  /* ------------------------------------------------------------------
     4 · ABSTÄNDE · RADIUS · SCHATTEN
     4-px-Basis. Freie Zwischenwerte sind nicht vorgesehen.
     ------------------------------------------------------------------ */

  --mm-space-1: 0.25rem;  /*  4 px */
  --mm-space-2: 0.5rem;   /*  8 px */
  --mm-space-3: 0.75rem;  /* 12 px */
  --mm-space-4: 1rem;     /* 16 px */
  --mm-space-5: 1.5rem;   /* 24 px */
  --mm-space-6: 2rem;     /* 32 px */
  --mm-space-7: 3rem;     /* 48 px */
  --mm-space-8: 4rem;     /* 64 px */
  --mm-space-9: 6rem;     /* 96 px */

  --mm-radius-xs:   4px;
  --mm-radius-sm:   6px;
  --mm-radius-md:  10px;
  --mm-radius-lg:  14px;
  --mm-radius-xl:  20px;
  --mm-radius-full: 999px;

  --mm-shadow-sm: 0 1px 2px rgba(35, 47, 63, 0.06);
  --mm-shadow-md: 0 1px 2px rgba(35, 47, 63, 0.05), 0 8px 24px rgba(35, 47, 63, 0.06);
  --mm-shadow-lg: 0 2px 4px rgba(35, 47, 63, 0.05), 0 16px 40px rgba(35, 47, 63, 0.08);


  /* ------------------------------------------------------------------
     5 · LAYOUT
     ------------------------------------------------------------------ */

  --mm-container-page:    1280px;
  --mm-container-content: 1120px;
  --mm-container-prose:    680px;  /* 66–68 Zeichen bei 19 px */
  --mm-container-sidebar:  260px;
  --mm-grid-columns: 12;
  --mm-grid-gap: var(--mm-space-5);

  --mm-bp-sm:  480px;
  --mm-bp-md:  768px;
  --mm-bp-lg: 1024px;
  --mm-bp-xl: 1280px;


  /* ------------------------------------------------------------------
     6 · BEWEGUNG · EBENEN
     ------------------------------------------------------------------ */

  --mm-duration-fast: 120ms;
  --mm-duration-base: 180ms;
  --mm-duration-slow: 280ms;
  --mm-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --mm-ease-out:      cubic-bezier(0, 0, 0.2, 1);

  --mm-z-base:      0;
  --mm-z-dropdown: 100;
  --mm-z-sticky:   200;
  --mm-z-overlay:  300;
  --mm-z-modal:    400;
  --mm-z-toast:    500;
  --mm-z-tooltip:  600;
}


/* =====================================================================
   NUR HELL
   Die Seiten haben feste Farben in vielen Bausteinen (Logo, Kursgrafiken
   auf Weiß, alte Theme-Regeln). Ein halber Dunkelmodus macht Text und
   Logo unlesbar, deshalb bleibt alles hell. „only“ hält auch den
   erzwungenen Dunkelmodus von Chrome auf dem Handy draußen.
   ===================================================================== */

:root { color-scheme: only light; }


/* =====================================================================
   BASIS-ANWENDUNG
   Minimal gehalten — nur was jede Seite braucht.
   ===================================================================== */

body {
  background: var(--mm-color-surface-paper);
  color: var(--mm-color-ink);
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-body);
  line-height: var(--mm-leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--mm-font-display); font-weight: var(--mm-weight-semibold); }
h4, h5, h6 { font-family: var(--mm-font-ui);      font-weight: var(--mm-weight-bold); }
h1 { font-size: var(--mm-text-h1); line-height: 1.10; letter-spacing: -0.018em; }
h2 { font-size: var(--mm-text-h2); line-height: var(--mm-leading-heading); letter-spacing: var(--mm-tracking-heading); }
h3 { font-size: var(--mm-text-h3); line-height: 1.24; letter-spacing: -0.010em; }
h4 { font-size: var(--mm-text-h4); line-height: var(--mm-leading-snug); }

/* Die Lesestrecke — der wichtigste Einzelselektor des ganzen Systems */
.mm-prose {
  max-width: var(--mm-container-prose);
  font-family: var(--mm-font-prose);
  font-size: var(--mm-text-prose);
  line-height: var(--mm-leading-prose);
  hyphens: auto;             /* zwingend, sonst reißen deutsche Komposita Löcher */
  -webkit-hyphens: auto;
  text-align: left;          /* im Web Flattersatz, im Buch Blocksatz */
}
.mm-prose > * + * { margin-top: 1.1em; }

a { color: var(--mm-color-brand-action); text-decoration: underline;
    text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--mm-color-brand-strong); text-decoration-thickness: 2px; }

:focus-visible { outline: none; box-shadow: var(--mm-focus-ring); border-radius: var(--mm-radius-xs); }

table { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}