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

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Geist:wght@300;400;500;600&display=swap');

/* ── 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:     #A09D97;
  --text-inverse:   #FFFFFF;

  /* Akzent — Warm Blue */
  --accent:        #3B5FCC;
  --accent-light:  #EDF0FA;
  --accent-hover:  #2E4BA8;
  --accent-border: #8DA2E0;

  /* 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-lg:     0 16px 40px rgba(26,25,22,0.12), 0 4px 8px rgba(26,25,22,0.06);

  /* Typografie */
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui:      'Geist', 'Helvetica Neue', sans-serif;
  --font-mono:    'Geist Mono', 'Courier New', 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-10: 40px;
  --space-12: 48px;

  /* Border-Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --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; }