@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

:root {
  --primary: #1C1E22;
  --primary-light: #222222;
  --accent: #FA1D31;
  --accent-hover: #d91829;
  --accent-soft: #ffe4e6;
  --text: #222222;
  --text-muted: #6B7280;
  --muted: var(--text-muted);
  --bg: #ffffff;
  --bg-subtle: #F9FAFB;
  --border: #D1D5DB;
  --card: #ffffff;
  --input-bg: #ffffff;
  --danger: #FA1D31;
  --danger-soft: #fff1f2;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);
  --brand-gradient: linear-gradient(135deg, #1C1E22 0%, #222222 100%);
  --header-bg: rgba(255, 255, 255, 0.92);
  --mix-base: #ffffff;
}

html[data-theme="dark"] {
  --primary: #f3f4f6;
  --primary-light: #d1d5db;
  --accent: #FA1D31;
  --accent-hover: #d91829;
  --accent-soft: rgba(250, 29, 49, 0.16);
  --text: #f3f4f6;
  --text-muted: #9ca3af;
  --muted: var(--text-muted);
  --bg: #111315;
  --bg-subtle: #0c0d0f;
  --border: #2a2e33;
  --card: #181b1f;
  --input-bg: #14171a;
  --danger: #ff6b78;
  --danger-soft: rgba(250, 29, 49, 0.16);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  --brand-gradient: linear-gradient(135deg, #0c0d0f 0%, #1C1E22 100%);
  --header-bg: rgba(12, 13, 15, 0.88);
  --app-header-bg: #0c0d0f;
  --mix-base: #181b1f;
}

body {
  font-family: "Poppins", system-ui, sans-serif;
}

.login-brand-content h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.login-card-header h2 {
  font-weight: 700;
}

.btn-primary {
  font-weight: 600;
}