/* ================================
   WEBSINT DESIGN SYSTEM
   Version : 1.0
================================ */

/* Light Theme */

:root {
  /* Overlay */

  --overlay: rgba(0, 0, 0, 0.55);

  /* Glass */

  --glass: rgba(255, 255, 255, 0.08);
  /* Primary */

  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #60a5fa;

  /* Accent */

  --accent: #38bdf8;
  --accent-light: #7dd3fc;

  /* Background */

  /* --bg: #f8fbff; */
  --bg: #b2ccee;
  --bg-light: #ffffff;
  --bg-dark: #eef5ff;

  /* Text */

  --text: #0f172a;
  --text-light: #475569;
  --text-gray: #64748b;
  --white: #ffffff;

  /* Border */

  --border: #dbeafe;

  /* Success */

  --success: #22c55e;

  /* Warning */

  --warning: #f59e0b;

  /* Danger */

  --danger: #ef4444;

  /* Shadow */

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

  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);

  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.15);

  /* Radius */

  --radius-sm: 8px;

  --radius: 14px;

  --radius-lg: 22px;

  --radius-xl: 40px;

  /* Transition */

  --transition: 0.35s ease;

  /* Container */

  --container: 1280px;

  /* Navbar */

  --navbar-height: 80px;

  /* Topbar */

  /* --topbar-height: 20px; */

  /* Section */

  --section-padding: 90px;

  /* Blur */

  --blur: blur(18px);
}

/* ===========================
 DARK MODE
=========================== */

body.dark {
  --bg: #08101f;

  --bg-light: #0f172a;

  --bg-dark: #162338;

  --text: #f1f5f9;

  --text-light: #cbd5e1;

  --text-gray: #94a3b8;

  --border: #223048;

  --shadow-sm: 0 5px 12px rgba(0, 0, 0, 0.25);

  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.35);

  --shadow-lg: 0 15px 45px rgba(0, 0, 0, 0.45);
  --overlay: rgba(0, 0, 0, 0.75);

  --glass: rgba(255, 255, 255, 0.05);
}