/* =========================
   LIGHT THEME VARIABLES
========================= */
:root {
    --bg-main: #f7f9fc;
    --bg-card: #ffffff;
    --bg-ad: #eef2f7;
    --bg-trust: #eaf4ff;
  
    --text-main: #1f2937;
    --text-muted: #6b7280;
  
    --primary: #2563eb;
    --primary-soft: #dbeafe;
  
    --border-color: #d1d5db;
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.05);
  }
  
  /* =========================
     APPLY COLORS
  ========================= */
  body {
    background: var(--bg-main);
    color: var(--text-main);
  }
  
  a {
    color: var(--primary);
  }
  
  .site-header,
  .site-footer {
    background: transparent;
  }
  
  .calculator-card {
    background: var(--bg-card);
    box-shadow: var(--shadow-soft);
  }
  
  input {
    border-color: var(--border-color);
    background: #fff;
    color: var(--text-main);
  }
  
  input:focus {
    outline: none;
    border-color: var(--primary);
  }
  
  /* =========================
     BUTTONS
  ========================= */
  button {
    background: var(--primary-soft);
    color: var(--primary);
  }
  
  button:hover {
    opacity: 0.9;
  }
  
  #resetBtn {
    background: #fee2e2;
    color: #991b1b;
  }
  
  /* =========================
     THEME BUTTONS
  ========================= */
  .theme-btn {
    background: #fff;
    border-color: var(--border-color);
    color: var(--text-main);
  }
  
  .theme-btn.active {
    border-color: var(--primary);
    color: var(--primary);
  }
  
  /* =========================
     TRUST BAR
  ========================= */
  .trust-bar {
    background: var(--bg-trust);
    color: #1e40af;
  }
  
  /* =========================
     ADS
  ========================= */
  .ad-slot {
    background: var(--bg-ad);
    color: var(--text-muted);
  }
  
  /* =========================
     FOOTER
  ========================= */
  .site-footer {
    color: var(--text-muted);
  }