/* ========================================= */
/* === Common Color Variables & Classes === */
/* ========================================= */
:root {
  --color-primary-blue: #0019D9;
  --color-accent-yellow: #FFCC00;
  --color-accent-orange: #FF6600;
  --color-text-primary: #333;
}


/* Component-Specific Styles */

 .frosted-glass {
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px); /* For Safari support */
    }

  .btn-custom {
      background-color: #ffcc00;
      color: #213697;
      font-weight: 700;
      transition: all 0.2s ease-in-out;
  }
  .btn-custom:hover { background-color: #e6b800; }
  .login-container {
      backdrop-filter: var(--form-backdrop-blur);
      -webkit-backdrop-filter: var(--form-backdrop-blur);
  }
  .input-bg-transparent {
      background-color: transparent !important;
      border: 1px solid rgba(255, 255, 255, 0.5) !important;
      color: white !important;
  }
  .input-bg-transparent:focus {
      border-color: rgba(255, 255, 255, 0.8) !important;
  }
  .form-label { color: rgba(255, 255, 255, 0.7); }

  
  /*
 * Your logo color scheme, converted from CMYK to HEX for web use.
 *
 * CMYK(100, 90, 15, 0) -> #0019D9 (Deep Blue)
 * CMYK(0, 20, 100, 0)  -> #FFCC00 (Bright Yellow)
 * CMYK(0, 60, 100, 0)  -> #FF6600 (Fiery Orange)
 */


/* Text Colors */
.text-primary-blue {
    color: var(--color-primary-blue);
}

.text-accent-yellow {
    color: var(--color-accent-yellow);
}

.text-accent-orange {
    color: var(--color-accent-orange);
}

.text-text-primary {
  color: #333;
  color: var(--color-text-primary);
}


/* Background Colors */
.bg-primary-blue {
    background-color: var(--color-primary-blue);
}

.bg-accent-yellow {
    background-color: var(--color-accent-yellow);
}

.bg-accent-orange {
    background-color: var(--color-accent-orange);
}


/* ========================================= */
/* === Base & Utility Styles === */
/* ========================================= */

/* General header styling */
header {
  padding: 20px;
  text-align: center;
}

/* General heading styles */
h1, h2, h3 {
  color: var(--color-accent-orange);
}

/* Button styles */
.button {
  background-color: var(--color-primary-blue);
  color: #fff;
  border: 2px solid var(--color-accent-orange);
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

/* Footer styles */
.footer {
  background-color: var(--color-accent-yellow);
  padding: 20px;
  text-align: center;
}


/* Media Queries */
    @media (max-width: 640px) {
        .responsive-heading { font-size: 1.25rem; }
    }