/* ===== PREMIUM FLEX COLOR SWATCH - COLORS ONLY ===== */

/* ===== CSS CUSTOM PROPERTIES (VARIABLES) ===== */
/* Light mode colors - Sophisticated Purple & Electric Accents */
:root {
  --bg-primary: #FAFAFA;
  --bg-secondary: rgba(248, 250, 252, 0.9);
  --bg-card: #FFFFFF;
  --bg-gradient-start: rgba(255, 255, 255, 0.95);
  --bg-gradient-mid: rgba(248, 250, 252, 0.8);
  --bg-gradient-end: rgba(248, 250, 252, 0);

  --text-primary: #1E1B4B;
  --text-secondary: #374151;
  --text-heading: #312E81;
  --text-light: #FFFFFF;

  --accent-primary: #7C3AED;
  --accent-secondary: #5B21B6;
  --accent-gold: #F59E0B;
  --accent-light-gold: #FCD34D;

  --border-primary: #E0E7FF;
  --border-secondary: #C7D2FE;

  --shadow-light: rgba(124, 58, 237, 0.15);
  --shadow-medium: rgba(91, 33, 182, 0.25);
  --shadow-heavy: rgba(91, 33, 182, 0.35);
}

/* Dark mode colors - Deep Purple with Electric Cyan */
.dark-mode,
html.dark-mode {
  --bg-primary: #0F0F23;
  --bg-secondary: rgba(15, 15, 35, 0.9);
  --bg-card: rgba(30, 27, 75, 0.8);
  --bg-gradient-start: rgba(30, 27, 75, 0.95);
  --bg-gradient-mid: rgba(30, 27, 75, 0.7);
  --bg-gradient-end: rgba(30, 27, 75, 0);

  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-heading: #06B6D4;
  --text-light: #0F0F23;

  --accent-primary: #06B6D4;
  --accent-secondary: #0891B2;
  --accent-gold: #F59E0B;
  --accent-light-gold: #D97706;

  --border-primary: #0891B2;
  --border-secondary: #06B6D4;

  --shadow-light: rgba(6, 182, 212, 0.2);
  --shadow-medium: rgba(8, 145, 178, 0.3);
  --shadow-heavy: rgba(8, 145, 178, 0.4);
}

/* ===== COLOR APPLICATIONS ===== */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.site-header {
  background: linear-gradient(to bottom,
    var(--bg-gradient-start) 0%,
    var(--bg-gradient-mid) 40%,
    var(--bg-gradient-end) 75%,
    transparent 100%);
  border-bottom-color: var(--border-primary);
}

.nav-logo {
  color: var(--text-heading);
}

#nav-wrapper nav li a {
  color: var(--text-light);
  background: var(--accent-primary);
  border-color: var(--border-primary);
  box-shadow: 0 4px 8px var(--shadow-light);
}

#nav-wrapper nav li a:hover,
#nav-wrapper nav li a:focus {
  color: var(--text-light);
  background: var(--accent-secondary);
  box-shadow: 0 6px 12px var(--shadow-medium);
}

.nav-toggle {
  color: var(--text-light);
  background: var(--accent-primary);
  border-color: var(--border-primary);
}

.nav-toggle:hover,
.nav-toggle:focus {
  background: var(--accent-secondary);
  box-shadow: 0 4px 8px var(--shadow-medium);
}

.sibling-link {
  background: var(--accent-primary);
  color: var(--text-light);
  border-color: var(--border-primary);
  box-shadow: 0 4px 8px var(--shadow-light);
}

.sibling-link:hover,
.sibling-link:focus {
  background: var(--accent-secondary);
  color: var(--text-light);
  box-shadow: 0 6px 12px var(--shadow-medium);
}

.sibling-link.active {
  background: var(--accent-light-gold);
  color: var(--text-light);
  border-color: var(--border-secondary);
  box-shadow: 0 6px 12px var(--shadow-heavy);
}

.toggle-dark-mode {
  background: var(--accent-primary);
  border-color: var(--border-primary);
  color: var(--text-light);
  box-shadow: 0 4px 6px var(--shadow-light);
}

.toggle-dark-mode:hover,
.toggle-dark-mode:focus {
  background: var(--accent-secondary);
  box-shadow: 0 6px 12px var(--shadow-medium);
}

.content-block,
.markdown-block {
  background: var(--bg-card);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.page-card {
  background: var(--bg-card);
  border-color: var(--border-secondary);
  color: var(--text-primary);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.page-card:hover {
  border-color: var(--border-secondary);
  box-shadow: 0 8px 16px var(--shadow-light);
}

.page-card a {
  color: var(--text-light);
  background: var(--accent-primary);
  border-color: var(--border-primary);
}

.page-card a:hover,
.page-card a:focus {
  color: var(--text-light);
  background: var(--accent-secondary);
  box-shadow: 0 4px 8px var(--shadow-medium);
}

.markdown-block h1,
.markdown-block h2,
.markdown-block h3,
.markdown-block h4,
.markdown-block h5,
.markdown-block h6,
.section-header h1,
.page-title,
.section-wrapper h2,
.page-card h2,
.page-card h3,
.testimonial-section h2,
.cta-box h2 {
  color: var(--text-heading);
}

.section-description,
.page-card .summary,
.no-pages,
.testimonial-meta .role,
.cta-quote,
.cta-box p {
  color: var(--text-secondary);
}

.testimonial-meta p {
  color: var(--text-heading);
}

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

.back-link a {
  color: var(--accent-primary);
}

.back-link a:hover {
  color: var(--accent-secondary);
}

.cta-btn {
  background: var(--accent-primary);
  color: var(--text-light);
  border-color: var(--border-primary);
  box-shadow: 0 4px 8px var(--shadow-medium);
}

.cta-btn:hover,
.cta-btn:focus {
  background: var(--accent-secondary);
  color: var(--text-light);
  box-shadow: 0 8px 16px var(--shadow-heavy);
}

.cta-contact {
  color: var(--text-primary);
}

.cta-contact a {
  color: var(--accent-secondary);
}

.cta-contact a:hover {
  color: var(--accent-gold);
}

.markdown-block blockquote {
  border-left-color: var(--accent-gold);
  background: rgba(244, 197, 66, 0.1);
  color: var(--text-primary);
}

.markdown-block code {
  background: var(--border-primary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.markdown-block pre {
  background: var(--border-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.caption {
  color: var(--text-light);
  background: rgba(0, 51, 102, 0.7);
}

.caption h2 {
  color: var(--text-light);
}

.card-emoji {
  color: var(--accent-gold);
}

.cta-box {
  background: var(--bg-card);
  border-color: var(--border-primary);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.testimonial-slide {
  background: var(--bg-card);
  border-color: var(--border-primary);
}

form {
  background: var(--bg-card);
  border-color: var(--border-primary);
}

form label {
  color: var(--text-heading);
}

form input,
form textarea {
  background: var(--bg-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

form input:focus,
form textarea:focus {
  background: var(--bg-primary);
  border-color: var(--border-secondary);
  box-shadow: 0 0 0 3px rgba(244, 197, 66, 0.1);
}

form input::placeholder,
form textarea::placeholder {
  color: var(--text-secondary);
}

.form-status {
  background: var(--border-primary);
  color: var(--text-primary);
}

.site-footer {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-top-color: var(--border-primary);
}

.footer-nav a,
.footer-contact a {
  color: var(--accent-secondary);
}

.footer-nav a:hover,
.footer-contact a:hover {
  color: var(--accent-gold);
}

.hero-section::before {
  background: rgba(244, 197, 66, 0.1);
}

button:focus,
a:focus,
input:focus,
textarea:focus {
  outline: 2px solid var(--accent-gold);
}