:root {
  /* Primary */
  --primary: #38c756;
  --primary-dark: #22923d;
  --primary-light: #6bc155;

  /* Secondary */
  --secondary: #3497de;
  --secondary-dark: #2977af;
  --secondary-light: #23bbf6;

  /* Accent */
  --accent: #23bbf6;

  /* Background */
  --bg: #ffffff;
  --bg-light: #f5f7fa;
  --bg-dark: #0b1c3f;

  /* Text */
  --text: #1a1a1a;
  --text-light: #6c757d;
  --white: #ffffff;

  /* Border */
  --border: #e5e7eb;

  /* State */
  --success: #38c756;
  --info: #3497de;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* Gradients */
  --g-primary: linear-gradient(135deg, #38c756, #6bc155);
  --g-secondary: linear-gradient(135deg, #3497de, #23bbf6);
  --g-mix-1: linear-gradient(135deg, #38c756, #3497de);
  --g-mix-2: linear-gradient(135deg, #22923d, #2977af);
  --g-mix-3: linear-gradient(135deg, #6bc155, #23bbf6);

  /* Light Gradients (Brand-aligned) */
  --gr-lg-1: linear-gradient(135deg, #d9f7e3, #e8f7ff);
  --gr-lg-2: linear-gradient(135deg, #e3fbe7, #dff3ff);
  --gr-lg-3: linear-gradient(135deg, #eafff0, #e6f4ff);
  --gr-lg-4: linear-gradient(135deg, #d6f7ff, #eafff5);
  --gr-lg-5: linear-gradient(135deg, #f0fff4, #e3f7ff);

  --overlay: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(21, 101, 192, 0.4) 100%
  );
}