/* ============================================================
   Orthologik — Design Tokens (Single Source of Truth)
   ------------------------------------------------------------
   Medizin-Blau-Spektrum + EIN Teal-Akzent (Aktion/Motivation).
   Alle text-tragenden Farben erfüllen WCAG 2.1 AA (>= 4.5:1),
   weil eine DiGA BITV 2.0 / EN 301 549 nachweisen muss.
   Zielgruppe 45-70+: große Basis-Schrift, große Touch-Targets.
   ============================================================ */

/* ---------- Schrift · Inter, lokal ausgeliefert ----------
   Inter von Rasmus Andersson, SIL Open Font License 1.1.
   Bewusst lokal statt von rsms.me: kein externer Request, damit keine
   Besucher-IP an Dritte geht (DSGVO). Pfade relativ zu dieser Datei.
   Nur die Schnitte, die die Seite wirklich nutzt: 400, 600, 700 und Kursiv 400.
   --o-weight-medium (500) ist zwar als Token definiert, wird aber nirgends
   angewendet. Wer es einsetzt, muss Inter-Medium.woff2 nachlegen und hier
   eine passende @font-face-Regel ergaenzen — sonst rechnet der Browser
   den Schnitt selbst hoch. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
}

:root {
  /* ---------- Farbe · Medizin-Blau (Vertrauen, 90%) ---------- */
  --o-navy-900: #0A2540; /* tiefes Ink-Navy — Headlines, max. Seriosität */
  --o-blue-800: #143D66;
  --o-blue-700: #1A5096;
  --o-blue-600: #1C5FA8; /* PRIMÄR — Markenblau, Buttons (weißer Text 5.6:1) */
  --o-blue-500: #2E74C0;
  --o-blue-400: #5A95D4;
  --o-blue-300: #8FB8E4;
  --o-blue-200: #C2DBF2;
  --o-blue-100: #E3EEFB; /* Flächen, Karten-Hintergrund */
  --o-blue-50:  #F2F7FD; /* Seiten-Hintergrund Blau-Tint */

  /* ---------- Farbe · Teal-Akzent (Aktion + „geschafft", 10%) ---------- */
  --o-teal-700: #0A7A6D; /* Akzent-Button-Fläche (weißer Text 5.2:1) */
  --o-teal-600: #0FA28F; /* Akzent-Linien, aktive Zustände */
  --o-teal-500: #15CCB6; /* Fortschritts-Füllung, Ringe */
  --o-teal-400: #36D6C2;
  --o-teal-100: #D2F6EF;
  --o-teal-50:  #E8FBF7;

  /* ---------- Farbe · Neutrale ---------- */
  --o-ink:       #14202E; /* Fließtext */
  --o-slate-700: #38495C;
  --o-slate-500: #5E7184; /* Sekundärtext auf Weiß (4.6:1) */
  --o-slate-300: #AFBCC9;
  --o-slate-200: #D9E0E7; /* Rahmen, Trennlinien */
  --o-slate-100: #EEF2F5;
  --o-white:     #FFFFFF;
  --o-bg:        #F7FAFC; /* App-/Seiten-Hintergrund */

  /* ---------- Farbe · Semantisch ---------- */
  --o-success: #0A7A6D;
  --o-warning: #8A6D00;
  --o-error:   #B3271E;

  /* ---------- Typografie ---------- */
  --o-font-sans: "Inter", "Source Sans 3", system-ui, -apple-system,
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --o-text-xs:      0.875rem;  /* 14px */
  --o-text-sm:      1rem;      /* 16px */
  --o-text-base:    1.125rem;  /* 18px — BODY-Default */
  --o-text-lg:      1.3125rem; /* 21px */
  --o-text-xl:      1.625rem;  /* 26px */
  --o-text-2xl:     2rem;      /* 32px */
  --o-text-3xl:     2.5rem;    /* 40px */
  --o-text-display: 3.25rem;   /* 52px — Hero */

  --o-leading-tight: 1.2;
  --o-leading-base:  1.5;

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

  /* ---------- Abstände (4px-Raster) ---------- */
  --o-space-1:  0.25rem;
  --o-space-2:  0.5rem;
  --o-space-3:  0.75rem;
  --o-space-4:  1rem;
  --o-space-5:  1.25rem;
  --o-space-6:  1.5rem;
  --o-space-8:  2rem;
  --o-space-10: 2.5rem;
  --o-space-12: 3rem;
  --o-space-16: 4rem;

  /* ---------- Radien ---------- */
  --o-radius-sm:   8px;
  --o-radius-md:   12px;
  --o-radius-lg:   16px;
  --o-radius-pill: 999px;

  /* ---------- Touch-Targets (BITV) ---------- */
  --o-touch-min:         48px;
  --o-touch-comfortable: 56px;
  --o-touch-cta:         60px;

  /* ---------- Schatten ---------- */
  --o-shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
  --o-shadow-md: 0 4px 16px rgba(10, 37, 64, 0.10);
  --o-shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.14);

  /* ---------- Fokus (Tastatur/Screenreader, Pflicht) ---------- */
  --o-focus-ring: 0 0 0 3px var(--o-white), 0 0 0 6px var(--o-blue-500);
}