/* Konkordanz Design-Tokens v2 — "Calm Slate / Teal", hell & hochwertig.
   Spec: docs/superpowers/specs/2026-07-10-design-overhaul-dashboard-design.md */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/design/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/design/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/design/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/design/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/design/fonts/inter-800.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/design/fonts/jetbrains-mono-400.woff2') format('woff2'); }

:root {
  /* Farben */
  --c-bg:         #eef1f4;
  --c-surface:    #ffffff;
  --c-surface-2:  #f8fafb;
  --c-border:     #e3e8ed;
  --c-text:       #1c2733;
  --c-text-muted: #64748b;
  --c-text-faint: #94a3b8;

  --c-accent:     #0d9488;
  --c-accent-ink: #0b6b5f;
  --c-accent-bg:  #e4f4f1;

  --c-ok-ink:   #0f7a60; --c-ok-bg:   #dcf2ea;
  --c-warn-ink: #b96e1c; --c-warn-bg: #fcefdd;
  --c-err-ink:  #c0392b; --c-err-bg:  #f9e3e0;
  --c-info-ink: #2563eb; --c-info-bg: #e3ecfd;

  --c-find-red:    #c0392b;
  --c-find-yellow: #e3b23c;
  --c-find-green:  #0f9d7a;

  /* Typografie */
  --font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 26px;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
  --lh: 1.5;

  /* Form, Abstand, Tiefe */
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow:    0 1px 3px rgba(16,24,40,.08), 0 4px 12px rgba(16,24,40,.05);
  --shadow-lg: 0 4px 6px rgba(16,24,40,.05), 0 12px 28px rgba(16,24,40,.08);
  --side-w: 224px;
  --detail-w: 340px;
}