/* =========================
   Global Color Variables
   ========================= */
:root {
  /* ---- Core Colors ---- */
  --core-1-hex: #19284A;
  --core-1-rgb: 25, 40, 74;
  --core-1-cmyk: 66, 46, 0, 71;

  --core-2-hex: #FF6B2C;
  --core-2-rgb: 255, 107, 44;
  --core-2-cmyk: 0, 58, 83, 0;

  --core-3-hex: #2187FF;
  --core-3-rgb: 33, 135, 255;
  --core-3-cmyk: 87, 47, 0, 0;

  /* ---- Accent Colors ---- */
  --accent-1-hex: #FF3E5C;
  --accent-1-rgb: 255, 62, 92;
  --accent-1-cmyk: 0, 76, 64, 0;

  --accent-2-hex: #B356D4;
  --accent-2-rgb: 179, 86, 212;
  --accent-2-cmyk: 16, 59, 0, 17;

  /* ---- Support Colors ---- */
  --support-1-hex: #03FF88;
  --support-1-rgb: 3, 255, 136;
  --support-1-cmyk: 99, 0, 47, 0;

  --support-2-hex: #00D5FE;
  --support-2-rgb: 0, 213, 254;
  --support-2-cmyk: 100, 16, 0, 0;

  --warning-hex: #CC9900;
  --warning-rgb: 204, 153, 0;

  /* ---- Backgrounds ---- */
  --dark-bg-hex: #0C101C;
  --dark-bg-rgb: 12, 16, 28;
  --dark-bg-cmyk: 57, 43, 0, 89;

  --light-bg-hex: #F3F3F3;
  --light-bg-rgb: 243, 243, 243;
  --light-bg-cmyk: 0, 0, 0, 5;

  --ui-gray-hex: #D1D5DB;
  --ui-gray-rgb: 209, 213, 219;
  --ui-gray-cmyk: 5, 3, 0, 14;

  --canvas-base-hex: #FFFFFF;
  --canvas-base-rgb: 255, 255, 255;
  --canvas-base-cmyk: 0, 0, 0, 0;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* =========================
   Background Utility Classes
   ========================= */

/* Solid Backgrounds */
.bg-core-1 {
  background-color: var(--core-1-hex);
}
.bg-core-2 {
  background-color: var(--core-2-hex);
}
.bg-core-3 {
  background-color: var(--core-3-hex);
}

.bg-dark-navy {
  background-color: var(--dark-bg-hex);
}

.bg-light {
  background-color: var(--light-bg-hex);
}

.bg-white {
  background-color: var(--canvas-base-hex);
}

.bg-accent-1-light {
  background-color: var(--accent-1-hex);
}

.bg-accent-1-light {
  background-color: var(--accent-1-hex);
}

.bg-support-1-light {
    background-color: rgba(var(--support-1-rgb), 0.1);
}

/* Gradients */
.bg-gradient-orange {
  background: linear-gradient(90deg, var(--core-2-hex), var(--accent-1-hex));
}

.bg-gradient-purple {
  background: linear-gradient(90deg, var(--core-3-hex), var(--accent-2-hex));
}

.bg-gradient-green {
  background: linear-gradient(90deg, var(--support-1-hex), var(--support-2-hex));
}

.bg-gradient-core1-dark {
  background: linear-gradient(90deg, var(--core-1-hex), var(--dark-bg-hex));
}

.alert.bg-support-1-light {
    border-color: rgba(var(--support-1-rgb), 0.3);
}

.alert.bg-accent-1-light {
    border-color: rgba(var(--accent-1-rgb), 0.3);
}
/* =========================
   Shadow Utility Classes
   ========================= */

.shadow-sm {
  box-shadow: var(--shadow-sm);
}
.shadow-md {
  box-shadow: var(--shadow-md);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}
.shadow-xl {
  box-shadow: var(--shadow-xl);
}
.shadow-none {
  box-shadow: none;
}