/* ============================================
   TraumGmbH — Base
   Variables, Reset, Typography, Icons
   ============================================ */

/* === VARIABLES === */
:root {
  --bg: #f6f6f2;
  --bg-white: #ffffff;
  --bg-input: #f0f0ec;
  --accent: #c0392b;
  --accent-hover: #a93226;
  --accent-pale: #fdf0ee;
  --accent-glow: rgba(192,57,43,0.06);
  --text: #1c1c1a;
  --text-sec: #7a7a72;
  --text-muted: #b0b0a8;
  --border: #eaeae4;
  --success: #27ae60;
  --success-pale: #edf8f0;
  --warning: #e67e22;
  --warning-pale: #fef8f0;
  --info: #2980b9;
  --info-pale: #eef6fc;
  --danger-pale: #fdf0ee;
  --r: 14px;
  --r-sm: 10px;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* === ICONS === */
.i { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.i svg {
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.i-12 { width: 12px; height: 12px; }
.i-12 svg { width: 12px; height: 12px; }
.i-14 { width: 14px; height: 14px; }
.i-14 svg { width: 14px; height: 14px; }
.i-16 { width: 16px; height: 16px; }
.i-16 svg { width: 16px; height: 16px; }
.i-18 { width: 18px; height: 18px; }
.i-18 svg { width: 18px; height: 18px; }
.i-20 { width: 20px; height: 20px; }
.i-20 svg { width: 20px; height: 20px; }
.i-22 { width: 22px; height: 22px; }
.i-22 svg { width: 22px; height: 22px; }

/* === UTILITY === */
.hide { display: none !important; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.px-24 { padding-left: 24px; padding-right: 24px; }
.text-center { text-align: center; }
.text-sec { color: var(--text-sec); }
.text-sm { font-size: 13px; }
.gap-row { display: flex; gap: 10px; }