/*
 * UNITY Foundation Global Theme
 * Marble Sky Blue Background + Dark Jade Green Text
 * Version: 4.0 - 2026-02-10 - COMPLETE REBUILD
 *
 * FRESH IMPLEMENTATION:
 * Clean marble texture with rich blue tones
 * Jade green text throughout
 * Layered gradients for depth
 */

/* ============================================
   COLOR PALETTE
   ============================================ */
:root {
  /* Primary Colors */
  --marble-blue: #A8C8E2;
  --marble-blue-light: #C0D6EA;
  --marble-blue-lighter: #D6E4F0;
  --marble-blue-dark: #8FB4D4;

  /* Jade Green (Text & Accents) */
  --jade-green: #2F5847;
  --jade-green-dark: #1F3A2E;
  --jade-green-light: #3A7059;

  /* Brand Colors */
  --maroon: #800000;
  --silver: #C0C0C0;

  /* Override charcoal with jade green */
  --charcoal: #2F5847;
  --white: #FFFFFF;
}

/* ============================================
   BODY - MARBLE SKY BLUE BACKGROUND
   Multi-layered marble texture
   ============================================ */
body {
  /* Rich marble texture with overlapping gradients */
  background:
    /* Marble veins - create organic flowing patterns */
    radial-gradient(ellipse 800px 600px at 15% 25%, rgba(160, 200, 235, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse 700px 500px at 85% 15%, rgba(180, 210, 240, 0.35) 0%, transparent 48%),
    radial-gradient(ellipse 600px 650px at 35% 75%, rgba(170, 205, 238, 0.3) 0%, transparent 52%),
    radial-gradient(ellipse 750px 550px at 75% 55%, rgba(190, 215, 242, 0.35) 0%, transparent 45%),
    radial-gradient(ellipse 650px 600px at 50% 90%, rgba(175, 208, 240, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 550px 500px at 20% 50%, rgba(185, 212, 238, 0.25) 0%, transparent 40%),
    /* Base gradient - sky blue marble */
    linear-gradient(
      155deg,
      #C0D6EA 0%,
      #D0E2F0 12%,
      #B5D0E8 22%,
      #CCDFF0 35%,
      #B8D4EE 48%,
      #D2E4F2 58%,
      #AECCE6 70%,
      #C8DCF0 82%,
      #B2CFE7 92%,
      #D6E8F4 100%
    );

  background-attachment: fixed;
  background-size: cover;

  /* Default text color: jade green */
  color: var(--jade-green);

  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

/* ============================================
   TYPOGRAPHY
   Jade green headings
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  color: var(--jade-green-dark);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

/* ============================================
   FORM ELEMENTS
   Jade green inputs with marble blue accents
   ============================================ */
input, textarea, select {
  color: var(--jade-green);
}

input::placeholder,
textarea::placeholder {
  color: rgba(47, 88, 71, 0.5);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--marble-blue);
  outline: 2px solid var(--marble-blue);
  outline-offset: 0;
}

/* ============================================
   FOOTER
   Dark jade green background
   ============================================ */
footer {
  background: var(--jade-green-dark) !important;
  color: var(--marble-blue-lighter) !important;
  border-top: 3px solid var(--marble-blue);
}

footer a {
  color: var(--marble-blue-light) !important;
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--white) !important;
}

/* ============================================
   LINKS
   Jade green with hover effects
   ============================================ */
a {
  color: var(--jade-green);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--jade-green-light);
}

/* ============================================
   BUTTONS
   Marble blue and jade green variants
   ============================================ */
.btn-primary {
  background: var(--marble-blue);
  color: var(--jade-green-dark);
  border: none;
  padding: 14px 32px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: var(--marble-blue-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(168, 200, 226, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--jade-green);
  border: 2px solid var(--marble-blue);
  padding: 14px 32px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: var(--marble-blue);
  color: var(--jade-green-dark);
  border-color: var(--marble-blue-dark);
}

/* ============================================
   CARDS & CONTAINERS
   Light backgrounds over marble
   ============================================ */
.card,
.service-card,
.org-card {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--marble-blue);
  transition: all 0.3s ease;
}

.card:hover,
.service-card:hover,
.org-card:hover {
  border-color: var(--jade-green);
  box-shadow: 0 12px 32px rgba(47, 88, 71, 0.15);
  transform: translateY(-4px);
}

/* ============================================
   SCROLLBAR STYLING
   Jade and marble blue
   ============================================ */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--marble-blue-lighter);
}

::-webkit-scrollbar-thumb {
  background: var(--jade-green);
  border-radius: 6px;
  border: 2px solid var(--marble-blue-lighter);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--jade-green-dark);
}

/* ============================================
   SELECTION HIGHLIGHT
   ============================================ */
::selection {
  background: var(--marble-blue);
  color: var(--jade-green-dark);
}

::-moz-selection {
  background: var(--marble-blue);
  color: var(--jade-green-dark);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-jade {
  color: var(--jade-green);
}

.text-marble {
  color: var(--marble-blue);
}

.bg-marble {
  background: var(--marble-blue-light);
}

.bg-jade {
  background: var(--jade-green);
  color: var(--white);
}

.border-jade {
  border-color: var(--jade-green);
}

.border-marble {
  border-color: var(--marble-blue);
}