/**
 * Alhambra Website Color Theme
 * Based on Stanford Cardinal Red
 */

:root {
  /* Primary Brand Colors */
  --color-cardinal-red: #8C1515;
  --color-cardinal-red-light: #B83A4B;
  --color-cardinal-red-dark: #820000;
  
  /* Neutral Colors */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-gray-light: #F5F5F5;
  --color-gray-medium: #CCCCCC;
  --color-gray-dark: #666666;
  
  /* Text Colors */
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-gray-dark);
  --color-text-on-dark: var(--color-white);
  --color-text-link: var(--color-cardinal-red);
  --color-text-link-hover: var(--color-cardinal-red-dark);
  
  /* Background Colors */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-light);
  --color-bg-dark: var(--color-black);
  --color-bg-cardinal: var(--color-cardinal-red);
  
  /* Button Colors */
  --color-btn-primary-bg: var(--color-cardinal-red);
  --color-btn-primary-text: var(--color-white);
  --color-btn-primary-hover: var(--color-cardinal-red-dark);
  --color-btn-primary-active: var(--color-cardinal-red-dark);
  
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-text: var(--color-cardinal-red);
  --color-btn-secondary-border: var(--color-cardinal-red);
  --color-btn-secondary-hover-bg: var(--color-cardinal-red);
  --color-btn-secondary-hover-text: var(--color-white);
  
  /* Link Colors */
  --color-link: var(--color-cardinal-red);
  --color-link-hover: var(--color-cardinal-red-dark);
  --color-link-visited: var(--color-cardinal-red-dark);
  
  /* Border Colors */
  --color-border-light: var(--color-gray-medium);
  --color-border-medium: var(--color-gray-dark);
  --color-border-cardinal: var(--color-cardinal-red);
  
  /* QR Code Colors */
  --color-qr-bg: var(--color-cardinal-red);
  --color-qr-text: var(--color-white);
  --color-qr-border: var(--color-white);
  
  /* Status Colors (optional) */
  --color-success: #28A745;
  --color-warning: #FFC107;
  --color-error: #DC3545;
  --color-info: var(--color-cardinal-red-light);
}

/* Utility Classes */
.bg-cardinal {
  background-color: var(--color-cardinal-red);
}

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

.bg-cardinal-dark {
  background-color: var(--color-cardinal-red-dark);
}

.text-cardinal {
  color: var(--color-cardinal-red);
}

.text-cardinal-light {
  color: var(--color-cardinal-red-light);
}

.text-cardinal-dark {
  color: var(--color-cardinal-red-dark);
}

.border-cardinal {
  border-color: var(--color-cardinal-red);
}

/* Button Styles */
.btn-primary {
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text) !important;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--color-btn-primary-hover);
  color: var(--color-white) !important;
}

.btn-primary:active {
  background-color: var(--color-btn-primary-active);
  color: var(--color-white) !important;
}

.btn-secondary {
  background-color: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-text);
  border: 2px solid var(--color-btn-secondary-border);
  padding: 10px 22px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--color-btn-secondary-hover-bg);
  color: var(--color-btn-secondary-hover-text);
}

/* Link Styles */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-link-hover);
}

a:visited {
  color: var(--color-link-visited);
}

/* Buttons should not inherit link colors */
a.btn,
a.btn-primary,
a.btn-secondary {
  color: inherit;
}

a.btn-primary,
button.btn-primary {
  color: var(--color-white) !important;
}

a.btn-primary:hover,
button.btn-primary:hover {
  color: var(--color-white) !important;
}

a.btn-secondary {
  color: var(--color-cardinal-red) !important;
}

a.btn-secondary:hover {
  color: var(--color-white) !important;
}

/* QR Code Container */
.qr-code-container {
  background-color: var(--color-qr-bg);
  color: var(--color-qr-text);
  padding: 30px;
  border: 3px solid var(--color-qr-border);
  border-radius: 8px;
  text-align: center;
}

.qr-code-text {
  color: var(--color-qr-text);
  font-weight: 600;
  margin-bottom: 15px;
}

/* Header/Navigation */
.header {
  background-color: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-light);
}

.nav-link {
  color: var(--color-text-primary);
}

.nav-link:hover {
  color: var(--color-cardinal-red);
}

/* Footer */
.footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.footer a {
  color: var(--color-text-on-dark);
}

.footer a:hover {
  color: var(--color-cardinal-red-light);
}

/* Hero Section */
.hero {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.hero-cta {
  background-color: var(--color-cardinal-red);
  color: var(--color-white);
}

.hero-cta:hover {
  background-color: var(--color-cardinal-red-dark);
}

/* Donation Section */
.donation-section {
  background-color: var(--color-cardinal-red);
  color: var(--color-white);
}

/* Cards */
.card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
}

.card:hover {
  border-color: var(--color-cardinal-red);
  box-shadow: 0 4px 8px rgba(140, 21, 21, 0.1);
}

/* Form Elements */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  padding: 10px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-cardinal-red);
  outline: none;
  box-shadow: 0 0 0 3px rgba(140, 21, 21, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 14px 24px;
  }
}