/* ==========================================================================
   medicalsimulation.eu — Designsystem
   SMF Ltd. · Basis: die Handschrift von jsevro.bg, angehoben.
   Diese Datei enthaelt nur Werte. Keine Bausteine — die stehen in site.css.
   ========================================================================== */

:root {
  /* ---- Farbe ------------------------------------------------------------ */
  --paper:        #FAF9F6;   /* Grundflaeche hell */
  --paper-2:      #F1EEE7;   /* zweite helle Flaeche, fuer Wechsel */
  --paper-3:      #F5F1E9;
  --line:         #EAE6DD;   /* Trennlinie auf Papier */

  --navy:         #081422;   /* Hero, Kopf, Fuss */
  --navy-2:       #0a1826;   /* zweite dunkle Flaeche */
  --navy-3:       #0E1B27;   /* Spezifikationsleiste */

  --gold:         #C7A265;   /* Akzent — nie flaechig */
  --gold-deep:    #8A6F3C;   /* Akzent auf hellem Grund — 4,51:1 auf Papier (WCAG AA) */
  --gold-line:    rgba(199, 162, 101, 0.40);
  --gold-hair:    rgba(199, 162, 101, 0.22);
  --gold-veil:    rgba(199, 162, 101, 0.12);

  --ink:          #20242A;   /* Fliesstext auf Papier */
  --slate:        #41474F;   /* zweite Textstufe */
  --mute:         #6C6A63;   /* Beschriftungen, Quellen */
  --faint:        #787265;   /* Platzhaltertext — 4,54:1 auf Papier (WCAG AA) */

  --on-navy:          rgba(250, 249, 246, 1);
  --on-navy-2:        rgba(250, 249, 246, 0.72);
  --on-navy-3:        rgba(250, 249, 246, 0.55);
  --on-navy-4:        rgba(250, 249, 246, 0.50);  /* 5,05:1 auf Navy (WCAG AA) */
  --on-navy-line:     rgba(250, 249, 246, 0.16);

  --ok:           #86A47C;   /* „verfuegbar" — semantisch, kein Akzent */
  --ok-ink:       #4C5347;

  /* ---- Schrift ---------------------------------------------------------- */
  /* Literata statt Newsreader: Newsreader hat KEIN Kyrillisch und kann
     Bulgarisch nicht setzen. Literata deckt Latein und Kyrillisch ab. */
  --serif: 'Literata', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', 'Hanken Grotesk', 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fliessende Groessen — Untergrenze mobil, Obergrenze Desktop */
  --t-hero:    clamp(44px, 5.6vw, 82px);
  --t-h1:      clamp(36px, 4.6vw, 66px);
  --t-h2:      clamp(30px, 3.4vw, 46px);
  --t-h3:      clamp(25px, 2.5vw, 36px);
  --t-h4:      clamp(21px, 1.9vw, 27px);
  --t-lede:    clamp(17px, 1.35vw, 20px);
  --t-body:    16px;
  --t-small:   14.5px;
  --t-label:   11px;
  --t-micro:   10px;

  --lh-display: 1.05;
  --lh-quote:   1.38;
  --lh-body:    1.68;
  --ls-display: -0.02em;
  --ls-label:   0.2em;

  /* ---- Raster und Abstand ------------------------------------------------ */
  --gutter:    clamp(20px, 6vw, 88px);   /* Seitenrand */
  --gap:       32px;                      /* Rasterabstand */
  --sec:       clamp(64px, 8vw, 116px);   /* Sektionsabstand vertikal */
  --sec-tight: clamp(48px, 6vw, 84px);
  --maxw:      1440px;

  /* ---- Form -------------------------------------------------------------- */
  --pill: 100px;    /* Schaltflaechen — wie jsevro.bg */
  --edge: 0;        /* Flaechen bleiben scharfkantig */
}