:root {
  /* ===== Brand Colors ===== */
  --brand-dark: #2F3E4E;        /* softened dark */
  --brand-pink: #DD1166;
  --brand-blue: #4A90E2;        /* light primary blue */
  --brand-blue-light: #7BB3FF;  /* soft sky blue */

  /* ===== Backgrounds ===== */
  --bg-primary: #ffffff;
  --bg-secondary: #f2f7ff;      /* lighter blue tint */
  --bg-dark: #223242;
  --bg-gradient: linear-gradient(135deg, #4A90E2, #7BB3FF);

  /* ===== Text Colors ===== */
  --text-primary: #2F3E4E;
  --text-secondary: #6b7c8f;
  --text-light: #ffffff;
  --text-muted: #a3b1bf;

  /* ===== Buttons ===== */
  --btn-primary-bg: #4A90E2;
  --btn-primary-hover: #7BB3FF;
  --btn-secondary-bg: #DD1166;
  --btn-secondary-hover: #c10f5a;

  /* ===== Borders & Lines ===== */
  --border-light: #e6eef7;
  --border-dark: #2F3E4E;

  /* ===== Shadows ===== */
  --shadow-soft: 0 4px 12px rgba(74, 144, 226, 0.18);
  --shadow-strong: 0 8px 24px rgba(123, 179, 255, 0.28);
}