/**
 * heimspiel.io — Design System
 * CI Colors, Typography, Base Components
 */

/* ===== CSS VARIABLES ===== */
:root {
  /* Primary */
  --hs-primary: #E63946;
  --hs-primary-dark: #C1121F;
  --hs-primary-bg: #FEF2F2;

  /* Secondary */
  --hs-secondary: #1D3557;
  --hs-secondary-light: #264573;

  /* Accent */
  --hs-accent: #F4A261;
  --hs-accent-bg: #FEF7EC;

  /* Semantic */
  --hs-success: #2A9D8F;
  --hs-success-bg: #ECFDF5;
  --hs-warning: #F59E0B;
  --hs-warning-bg: #FFFBEB;
  --hs-danger: #EF4444;
  --hs-danger-bg: #FEF2F2;
  --hs-info: #3B82F6;
  --hs-info-bg: #EFF6FF;

  /* Neutrals (Brand Board) */
  --hs-bg: #FDF6F0;
  --hs-bg-light: #F1FAEE;
  --hs-bg-card: #FFFFFF;
  --hs-border: #DEE2E6;
  --hs-border-focus: #1D3557;
  --hs-gray-100: #F8F9FA;
  --hs-gray-200: #E9ECEF;
  --hs-gray-300: #DEE2E6;
  --hs-gray-800: #343A40;

  /* Text (Brand Board) */
  --hs-text: #0D1B2A;
  --hs-text-mid: #415A77;
  --hs-text-light: #778DA9;

  /* Shadows */
  --hs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --hs-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --hs-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);

  /* Radii */
  --hs-radius: 16px;
  --hs-radius-sm: 12px;
  --hs-radius-xs: 8px;

  /* Scanner category colors (used in QR display and scanner) */
  --hs-cat-red: #E63946;
  --hs-cat-blue: #3B82F6;
  --hs-cat-yellow: #F59E0B;
  --hs-cat-green: #2A9D8F;
  --hs-cat-purple: #8B5CF6;
  --hs-cat-pink: #EC4899;
}

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

/* ===== TYPOGRAPHY ===== */
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hs-text);
  background: var(--hs-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

/* ===== UTILITY CLASSES ===== */
.hs-text-primary { color: var(--hs-primary); }
.hs-text-success { color: var(--hs-success); }
.hs-text-warning { color: var(--hs-warning); }
.hs-text-danger { color: var(--hs-danger); }
.hs-text-light { color: var(--hs-text-light); }
.hs-text-mid { color: var(--hs-text-mid); }

.hs-bg-primary { background: var(--hs-primary-bg); }
.hs-bg-success { background: var(--hs-success-bg); }
.hs-bg-warning { background: var(--hs-warning-bg); }
.hs-bg-danger { background: var(--hs-danger-bg); }

.hs-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
.hs-display { font-family: 'Outfit', sans-serif; }

/* ===== BUTTONS ===== */
.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--hs-radius-xs);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  line-height: 1;
}

.hs-btn:active { transform: scale(0.97); }
.hs-btn:disabled { opacity: 0.4; pointer-events: none; }

.hs-btn-primary { background: var(--hs-primary); color: #fff; }
.hs-btn-primary:hover { background: var(--hs-primary-dark); box-shadow: var(--hs-shadow-md); }

.hs-btn-success { background: var(--hs-success); color: #fff; }
.hs-btn-success:hover { background: #248F82; }

.hs-btn-outline { background: #fff; color: var(--hs-text); border: 1px solid var(--hs-border); }
.hs-btn-outline:hover { border-color: var(--hs-text-light); }

.hs-btn-ghost { background: transparent; color: var(--hs-text-light); }
.hs-btn-ghost:hover { color: var(--hs-text); }

.hs-btn-sm { padding: 6px 14px; font-size: 12px; }
.hs-btn-lg { padding: 14px 28px; font-size: 16px; }
.hs-btn-block { width: 100%; }

/* ===== CARDS ===== */
.hs-card {
  background: var(--hs-bg-card);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  padding: 24px;
  box-shadow: var(--hs-shadow-sm);
}

/* ===== INPUTS ===== */
.hs-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--hs-border);
  border-radius: var(--hs-radius-xs);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: var(--hs-text);
  background: #fff;
  transition: all 0.15s ease;
}

.hs-input:focus {
  outline: none;
  border-color: var(--hs-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.hs-input::placeholder { color: var(--hs-text-light); }

/* ===== BADGES ===== */
.hs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}

.hs-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.hs-badge-success { background: var(--hs-success-bg); color: var(--hs-success); }
.hs-badge-warning { background: var(--hs-warning-bg); color: var(--hs-warning); }
.hs-badge-danger { background: var(--hs-danger-bg); color: var(--hs-danger); }
.hs-badge-info { background: var(--hs-info-bg); color: var(--hs-info); }
.hs-badge-neutral { background: #F1F5F9; color: var(--hs-text-light); }