/* ══════════════════════════════════════════════
   LEGIO — Base Styles
   Reset, CSS-Variablen, Typografie
   ══════════════════════════════════════════════ */

/* Lokale Fonts — Bricolage Grotesque (Display) + Inter (UI) — DSGVO-konform, kein CDN */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter.woff2') format('woff2');
}

/* ── CSS Custom Properties ── */
:root {
  /* Hintergruende */
  --bg-base:      #F8F7F4;
  --bg-surface:   #FFFFFF;
  --bg-subtle:    #F2F1EE;
  --bg-muted:     #E8E6E1;

  /* Text */
  --text-primary:   #1A1916;
  --text-secondary: #6B6860;
  --text-muted:     #7A766E;   /* >= 4.5:1 auf --bg-base — WCAG AA */
  --text-inverse:   #FFFFFF;

  /* Akzent — Schwarz (war Warm Blue, geändert 2026-05-10) */
  --accent:        #1A1916;
  --accent-light:  #F2F1EE;
  --accent-hover:  #000000;
  --accent-border: #6B6860;

  /* Status */
  --status-neu-bg:       #EFF6FF;  --status-neu-text:       #2563EB;
  --status-kontakt-bg:   #F0F9FF;  --status-kontakt-text:   #0369A1;
  --status-absprache-bg: #FAF5FF;  --status-absprache-text: #7C3AED;
  --status-angebot-bg:   #EDF0FA;  --status-angebot-text:   #3B5FCC;
  --status-abschluss-bg: #F0FDF4;  --status-abschluss-text: #15803D;
  --status-aktiv-bg:     #F0FDF4;  --status-aktiv-text:     #166534;
  --status-verloren-bg:  #FEF2F2;  --status-verloren-text:  #DC2626;

  /* Borders & Shadows */
  --border:        #E4E2DC;
  --border-strong: #C8C5BE;
  --shadow-sm:     0 1px 3px rgba(26,25,22,0.06), 0 1px 2px rgba(26,25,22,0.04);
  --shadow-md:     0 4px 12px rgba(26,25,22,0.08), 0 2px 4px rgba(26,25,22,0.04);
  --shadow-card:   0 4px 16px rgba(26,25,22,0.08), 0 1px 4px rgba(26,25,22,0.04);
  --shadow-lg:     0 16px 40px rgba(26,25,22,0.12), 0 4px 8px rgba(26,25,22,0.06);

  /* Typografie — Bricolage Grotesque (Display) + Inter (UI) */
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --font-ui:      'Inter', 'Helvetica Neue', sans-serif;
  --font-mono:    ui-monospace, 'Geist Mono', 'SF Mono', Menlo, monospace;

  /* Spacing (8px Grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* Border-Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-card: 16px;
  --radius-xl:   20px;
  --radius-full: 9999px;
}

/* ── Reset ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--text-primary);
  background: var(--bg-base);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font-ui);
  cursor: pointer;
}

input, textarea, select {
  font-family: var(--font-ui);
}

img, svg {
  display: block;
  max-width: 100%;
}

/* ── Typografische Skala ── */
.text-xs      { font-size: 11px; font-weight: 500; }
.text-sm      { font-size: 13px; font-weight: 400; }
.text-base    { font-size: 15px; font-weight: 400; }
.text-lg      { font-size: 18px; font-weight: 600; }
.text-xl      { font-size: 24px; font-weight: 600; }
.text-2xl     { font-size: 32px; font-weight: 600; }
.text-display { font-family: var(--font-display); font-size: 48px; font-weight: 400; }

/* ── Focus-Indikator (Tastatur-A11y) ── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Inputs nutzen ihre eigene fokus-Hervorhebung über components.css */
.input:focus-visible { outline-offset: 0; }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}