/* eMentalist × Advicum – Joint-Brand-Tokens.
   Unverändert aus dem Design System übernommen (tokens/colors, typography, spacing, effects).
   Hier nichts anpassen: App-spezifische Farben und Komponenten stehen in app.css.
   Schrift: Open Sans 400/600/700/800, wird in index.html von Google Fonts geladen. */

:root {
  /* Flächen */
  --paper: #eef1f4;
  --card: #ffffff;
  --surface-sub: #f5f7f9;
  --surface-dash: #f7f9fb;

  /* Text */
  --ink: #16273b;
  --ink-body: #3c4d63;
  --ink-soft: #4a5c73;
  --ink-mute: #5b6b7f;
  --ink-faint: #93a1b3;

  /* Linien */
  --line: #dbe1ea;
  --line-soft: #eef1f4;
  --line-strong: #c3cede;

  /* Navy – Titel, Hauptaktionen, „unser“ */
  --accent: #1e3a5d;
  --accent-deep: #12283f;
  --accent-tint: #e3e8f0;
  --accent-badge: #e7ecf2;

  /* Rot – Links, Hervorhebung, Warnungen, „extern“ */
  --brand: #a6111c;
  --brand-deep: #7a0d15;
  --brand-tint: #fdf2f3;
  --brand-line: #f0c8cc;

  /* Grau – neutrale Kennzeichnung */
  --neutral: #93a1b3;
  --neutral-tint: #e9edf1;

  /* Status */
  --green: #1a7a4f;
  --warn: #9a3412;
  --warn-bg: #fff6ed;
  --warn-line: #f0d6b4;
  --crit: #a6111c;
  --crit-bg: #f7e3e1;

  /* Erweiterte Akzentpalette – für Diagramme, Tags, Kategorien */
  --accent-navy: #1e3a5d;
  --accent-slate: #616e89;
  --accent-amber: #b25e09;
  --accent-steel: #5b6b7e;
  --accent-violet: #7c5cbf;
  --accent-teal: #0f766e;
  --accent-olive: #4c6b1f;
  --accent-silver: #8a94a3;

  /* Typografie */
  --font-sans: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-h1: 34px;
  --fs-page: 30px;
  --fs-masthead: 25px;
  --fs-h2: 20px;
  --fs-lead: 18px;
  --fs-card-title: 17.5px;
  --fs-body-lg: 15.5px;
  --fs-body: 14.5px;
  --fs-ui: 14px;
  --fs-label: 13.5px;
  --fs-small: 13px;
  --fs-meta: 12.5px;
  --fs-pill: 12px;
  --fs-eyebrow: 11.5px;
  --ls-display: -.02em;
  --ls-masthead: -.015em;
  --ls-h2: -.01em;
  --ls-eyebrow: .13em;
  --ls-section: .1em;

  /* Abstände & Maße */
  --maxw: 1080px;
  --gutter: 24px;
  --gutter-sm: 16px;
  --control-sm: 34px;
  --control-md: 46px;

  /* Radien, Schatten, Bewegung */
  --radius: 14px;
  --radius-btn: 12px;
  --radius-sm: 11px;
  --radius-xs: 5px;
  --radius-pill: 999px;
  --shadow-hover: 0 12px 28px rgba(22, 39, 59, .10);
  --shadow-card: 0 6px 18px -16px rgba(20, 27, 36, .5);
  --shadow-pop: 0 12px 30px -20px rgba(20, 27, 36, .6);
  --focus: 0 0 0 3px rgba(30, 58, 93, .22);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur-card: 200ms;
}