/* ==========================================================
   WAHID ENTERPRISE AUTHENTICATION THEME
   Version : 1.0
========================================================== */

:root {
  /* Color */

  --primary: #123e73;
  --primary-dark: #0e2f57;
  --primary-light: #3a74b4;

  --secondary: #c79a2b;
  --secondary-light: #e8c05d;

  --success: #198754;
  --danger: #dc3545;
  --warning: #ffc107;
  --info: #0dcaf0;

  --white: #ffffff;
  --black: #000000;

  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Gradient */

  --gradient-primary: linear-gradient(135deg, #123e73 0%, #2c67a8 50%, #c79a2b 100%);

  --gradient-dark: linear-gradient(135deg, #071b34, #123e73);

  --gradient-gold: linear-gradient(135deg, #b88719, #f5c242);

  /* Glass */

  --glass-bg: rgba(255, 255, 255, 0.18);

  --glass-border: rgba(255, 255, 255, 0.28);

  --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);

  --glass-blur: 25px;

  /* Shadow */

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);

  --shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

  --shadow-lg: 0 25px 60px rgba(0, 0, 0, 0.18);

  /* Radius */

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 30px;
  --radius-xl: 40px;

  /* Transition */

  --transition: 0.3s ease;
}

/* ========================================================== */

* {
  margin: 0;

  padding: 0;

  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

  background: var(--gray-50);

  color: var(--gray-800);

  overflow-x: hidden;
}

/* ========================================================== */

a {
  text-decoration: none;

  transition: var(--transition);
}

a:hover {
  text-decoration: none;
}

/* ========================================================== */

img {
  max-width: 100%;

  display: block;
}

/* ========================================================== */

button {
  transition: var(--transition);
}

button:focus {
  outline: none;

  box-shadow: none;
}

/* ========================================================== */

.form-control {
  border-radius: 14px;

  transition: var(--transition);
}

.form-control:focus {
  border-color: var(--primary);

  box-shadow: 0 0 0 0.18rem rgba(18, 62, 115, 0.15);
}

/* ========================================================== */

.form-select {
  border-radius: 14px;
}

/* ========================================================== */

.card {
  border: none;
}

/* ========================================================== */

.text-primary {
  color: var(--primary) !important;
}

.bg-primary {
  background: var(--primary) !important;
}

.bg-gradient-primary {
  background: var(--gradient-primary);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

.shadow-soft {
  box-shadow: var(--shadow);
}

.shadow-large {
  box-shadow: var(--shadow-lg);
}

/* ========================================================== */