:root {

  /* =========================================================
     BORDER RADIUS
  ========================================================== */
  --border-radius: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* =========================================================
     PRIMARY COLORS (Soft Blue)
  ========================================================== */
  --primary: #4da6d9;
  --primary-hover: #3399cc;
  --primary-light: #edf7fc;

  /* =========================================================
     SECONDARY COLORS (Soft Coral)
  ========================================================== */
  --secondary: #f28b82;
  --secondary-hover: #ea7268;
  --secondary-light: #fff1ef;

  /* =========================================================
     TERTIARY COLORS (Soft Teal)
  ========================================================== */
  --tertiary: #67c5ca;
  --tertiary-hover: #4eb6bc;
  --tertiary-light: #eefafa;

  /* =========================================================
     DARK COLORS (Light Modern Gray)
  ========================================================== */
  --dark: #5b6777;
  --dark-100: #6b7280;
  --dark-200: #7c8593;
  --dark-300: #9aa3af;

  /* =========================================================
     LIGHT COLORS
  ========================================================== */
  --light: #ffffff;
  --light-100: #fcfcfc;
  --light-200: #f8fafc;
  --light-300: #f1f5f9;

  /* =========================================================
     TEXT COLORS
  ========================================================== */
  --text: #495057;
  --text-muted: #7b8794;
  --heading: #2f3a45;

  /* =========================================================
     BACKGROUND COLORS
  ========================================================== */
  --body-bg: #ffffff;
  --section-bg: #f8fbfd;
  --card-bg: #ffffff;

  /* =========================================================
     BORDER COLORS
  ========================================================== */
  --border: #e9eef3;
  --border-light: #f3f6f9;

  /* =========================================================
     GREY SCALE
  ========================================================== */
  --grey-100: #f8fafc;
  --grey-200: #f1f5f9;
  --grey-300: #e9eef3;
  --grey-400: #d8e1e8;
  --grey-500: #b8c2cc;
  --grey-600: #94a3b8;
  --grey-700: #738194;
  --grey-800: #5b6777;
  --grey-900: #3f4a59;

  /* =========================================================
     SHADOWS
  ========================================================== */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.08);

  /* =========================================================
     TRANSITION
  ========================================================== */
  --transition: all 0.3s ease;

}