/* ============================================
   Theme 3: CLEAN LIGHT — White / Navy / Gold
   Bright, open, trustworthy, approachable
   ============================================ */

[data-theme="clean"] {
  /* Backgrounds */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F6FA;
  --hero-bg: linear-gradient(180deg, #F8F9FC 0%, #FFFFFF 100%);
  --hero-pattern: radial-gradient(circle at 70% 40%, rgba(11,29,58,0.03) 0%, transparent 50%);
  --hero-pattern-opacity: 1;

  /* Text */
  --text-primary: #2D2D3A;
  --text-secondary: #5A6270;
  --text-heading: #0B1D3A;
  --text-muted: #9CA3AF;

  /* Accents */
  --accent-1: #0B1D3A;
  --accent-1-hover: #163A6B;
  --accent-2: #C9903C;

  /* Buttons */
  --btn-primary-bg: #0B1D3A;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #163A6B;
  --btn-shadow: rgba(11,29,58,0.2);

  /* Cards */
  --card-bg: #FFFFFF;
  --card-border: #E5E7EB;
  --card-hover-shadow: 0 8px 32px rgba(11,29,58,0.08), 0 0 0 1px rgba(201,144,60,0.15);

  /* Badge */
  --badge-bg: #C41E3A;
  --badge-text: #FFFFFF;

  /* Icons */
  --icon-bg: rgba(201,144,60,0.1);

  /* Mascot */
  --mascot-glow: rgba(201,144,60,0.12);

  /* Nav */
  --header-bg: rgba(255,255,255,0.85);
  --header-bg-solid: rgba(255,255,255,0.95);
  --mobile-nav-bg: rgba(255,255,255,0.98);
  --nav-link: #4B5563;
  --nav-link-hover: #0B1D3A;
  --nav-link-hover-bg: rgba(11,29,58,0.04);
  --border-subtle: #D1D5DB;

  /* Form */
  --input-bg: #FFFFFF;
  --input-border: #D1D5DB;
  --input-focus-border: #0B1D3A;
  --input-focus-shadow: rgba(11,29,58,0.1);
  --input-checked-bg: rgba(11,29,58,0.04);

  /* Footer — contrast flip to dark */
  --footer-bg: #0B1D3A;
  --footer-text: #B8C9E0;
}

/* Clean: theme dots need dark borders */
[data-theme="clean"] .theme-dot {
  border-color: rgba(0,0,0,0.15);
}

[data-theme="clean"] .theme-dot.active {
  border-color: #C9903C;
  box-shadow: 0 0 8px rgba(201,144,60,0.4);
}

/* Clean: hamburger lines need dark color */
[data-theme="clean"] .hamburger-line {
  background: #2D2D3A;
}

/* Clean: product cards get shadow instead of border emphasis */
[data-theme="clean"] .product-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

[data-theme="clean"] .benefit-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* Clean: testimonial labels */
[data-theme="clean"] .testimonial-label--after {
  background: #0B1D3A;
}

/* Clean: form wrapper shadow instead of transparent bg */
[data-theme="clean"] .form-wrapper {
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

/* Clean: subtle pattern */
[data-theme="clean"] .hero-bg-pattern {
  background-image: var(--hero-pattern);
  opacity: 1;
}

/* Clean: ghost button gets dark border */
[data-theme="clean"] .btn-ghost {
  border-color: #D1D5DB;
  color: #0B1D3A;
}

[data-theme="clean"] .btn-ghost:hover {
  border-color: #0B1D3A;
  color: #0B1D3A;
}

/* Clean: section-alt cards need border for definition */
[data-theme="clean"] .section-alt .benefit-card,
[data-theme="clean"] .section-alt .product-card {
  border: 1px solid #E5E7EB;
}

/* Clean: form input border visible */
[data-theme="clean"] .radio-label,
[data-theme="clean"] .checkbox-label {
  border-color: #D1D5DB;
  background: #FFFFFF;
}

/* Clean: checkbox check mark color */
[data-theme="clean"] .checkbox-label input:checked ~ .checkbox-custom::after {
  border-color: #FFFFFF;
}

/* Clean: required asterisk */
[data-theme="clean"] .required {
  color: #C41E3A;
}