/* ============================================================
   scoremark — Design Tokens  ·  CSS Custom Properties
   Palette: kühles Blau (Primär) + Sky (Akzent). Passend zum Logo.
   Schrift einbinden (Inter):
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   ============================================================ */
:root {
  /* ---------- Marke: Blau (Primär / Aktion) ---------- */
  --sm-blue-50:  #EFF6FF;
  --sm-blue-100: #DBEAFE;
  --sm-blue-200: #BFDBFE;
  --sm-blue-300: #93C5FD;
  --sm-blue-400: #60A5FA;
  --sm-blue-500: #3B82F6;
  --sm-blue-600: #2563EB;  /* Markenfarbe */
  --sm-blue-700: #1D4ED8;
  --sm-blue-800: #1E40AF;
  --sm-blue-900: #1E3A8A;

  /* ---------- Akzent: Sky (kühl) ---------- */
  --sm-sky-400: #38BDF8;
  --sm-sky-500: #0EA5E9;  /* Akzentfarbe */
  --sm-sky-600: #0284C7;
  --sm-sky-700: #0369A1;

  /* ---------- Markenverlauf ---------- */
  --sm-gradient: linear-gradient(135deg, #2563EB, #0EA5E9);

  /* ---------- Neutraltöne ---------- */
  --sm-neutral-0:   #FFFFFF;
  --sm-neutral-50:  #F8FAFC;
  --sm-neutral-100: #F1F5F9;
  --sm-neutral-200: #E2E8F0;
  --sm-neutral-300: #CBD5E1;
  --sm-neutral-400: #94A3B8;
  --sm-neutral-500: #64748B;
  --sm-neutral-600: #475569;
  --sm-neutral-700: #334155;
  --sm-neutral-800: #1E293B;
  --sm-neutral-900: #0F172A;
  --sm-ink:         #0B1120;

  /* ---------- Semantische Aliase: Flächen & Text ---------- */
  --color-bg:             var(--sm-neutral-50);
  --color-surface:        var(--sm-neutral-0);
  --color-surface-2:      var(--sm-neutral-100);
  --color-border:         var(--sm-neutral-200);
  --color-border-strong:  var(--sm-neutral-300);
  --color-text:           var(--sm-neutral-900);
  --color-text-muted:     var(--sm-neutral-500);
  --color-text-subtle:    var(--sm-neutral-400);
  --color-text-on-primary:#FFFFFF;

  /* ---------- Aktion / Fokus ---------- */
  --color-primary:        var(--sm-blue-600);
  --color-primary-hover:  var(--sm-blue-700);
  --color-primary-active: var(--sm-blue-800);
  --color-accent:         var(--sm-sky-500);
  --color-focus-ring:     var(--sm-blue-400);

  /* ---------- Status (Kernfunktion im Audit-Tool) ---------- */
  --color-success:    #16A34A;  --color-success-bg: #DCFCE7;  --color-success-fg: #166534;
  --color-warning:    #F59E0B;  --color-warning-bg: #FEF3C7;  --color-warning-fg: #92400E;
  --color-danger:     #DC2626;  --color-danger-bg:  #FEE2E2;  --color-danger-fg:  #991B1B;
  /* Info nutzt bewusst die Sky-Seite, damit es sich von der Primär-Aktion (Blau) abhebt */
  --color-info:       #0284C7;  --color-info-bg:    #E0F2FE;  --color-info-fg:    #075985;

  /* ---------- Score-Skala 0–100 % (Gauges, Ringe, Benchmarks) ---------- */
  --score-critical:  #DC2626;  /*   0–49  */
  --score-low:       #F59E0B;  /*  50–69  */
  --score-mid:       #FACC15;  /*  70–84  */
  --score-high:      #65A30D;  /*  85–94  */
  --score-excellent: #16A34A;  /*  95–100 */
  --score-track:     var(--sm-neutral-200);

  /* ---------- Typografie ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem;
  --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.375rem; --text-5xl: 3rem;
  --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  /* ---------- Abstände (4px-Raster) ---------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* ---------- Radien ---------- */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px;

  /* ---------- Schatten ---------- */
  --shadow-sm: 0 1px 2px rgba(11,17,32,.06), 0 1px 1px rgba(11,17,32,.04);
  --shadow-md: 0 4px 12px rgba(11,17,32,.08), 0 2px 4px rgba(11,17,32,.05);
  --shadow-lg: 0 12px 32px rgba(11,17,32,.12), 0 4px 8px rgba(11,17,32,.06);
}

/* Dunkler Modus (optional): <html data-theme="dark"> */
[data-theme="dark"] {
  --color-bg: var(--sm-ink); --color-surface: var(--sm-neutral-900); --color-surface-2: var(--sm-neutral-800);
  --color-border: #233047; --color-border-strong: var(--sm-neutral-700);
  --color-text: var(--sm-neutral-100); --color-text-muted: var(--sm-neutral-400); --color-text-subtle: var(--sm-neutral-500);
  --color-primary: var(--sm-blue-500); --color-primary-hover: var(--sm-blue-400);
}

/* Beispiel-Komponenten */
.sm-btn { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-base);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); border: 1px solid transparent; cursor: pointer; line-height: 1; }
.sm-btn--primary { background: var(--color-primary); color: var(--color-text-on-primary); }
.sm-btn--primary:hover { background: var(--color-primary-hover); }
.sm-btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.sm-btn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.sm-badge { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans);
  font-weight: var(--weight-bold); font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }
.sm-badge--pass { background: var(--color-success-bg); color: var(--color-success-fg); }
.sm-badge--warn { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.sm-badge--fail { background: var(--color-danger-bg);  color: var(--color-danger-fg);  }
.sm-badge--info { background: var(--color-info-bg);    color: var(--color-info-fg);    }
.sm-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }