/* Typography */
  body {
      font-family: 'Source Sans Pro', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-family: 'Inter', 'Source Sans Pro', sans-serif;
  }

  /* Keep colors neutral (you said you'll add colors later) */
  :root {
      --accent: #02aff4;
  }

  /* just a reference, won't apply globally */

  /* Mission-ready animation + checkmark */
  .mission-success {
      animation: fadeIn 0.45s ease-in-out;
  }

  .checkmark-container {
      display: inline-block;
      width: 88px;
      height: 88px;
  }

  .checkmark {
      width: 88px;
      height: 88px;
      stroke-width: 4;
      stroke: currentColor;
      fill: none;
      stroke-linecap: round;
      animation: drawCircle 1s ease forwards, drawCheck 0.7s ease 0.85s forwards;
  }

  .checkmark-circle {
      stroke-dasharray: 166;
      stroke-dashoffset: 166;
  }

  .checkmark-check {
      stroke-dasharray: 48;
      stroke-dashoffset: 48;
  }

  @keyframes drawCircle {
      to {
          stroke-dashoffset: 0;
      }
  }

  @keyframes drawCheck {
      to {
          stroke-dashoffset: 0;
      }
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(6px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* Form card */
  .card-minimal {
      border: 0;
      border-radius: 12px;
      box-shadow: 0 6px 20px rgba(2, 10, 25, 0.06);
  }

  /* Honeypot - visually hidden but accessible to bots */
  .hp {
      position: absolute !important;
      left: -10000px !important;
      top: auto !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden;
  }

  /* Accessible live region spacing */
  #formFeedback {
      min-height: 56px;
      margin-top: 1rem;
  }

  /* Slight focus ring for inputs to aid keyboard users */
  input:focus,
  textarea:focus,
  select:focus {
      outline: 3px solid rgba(2, 175, 244, 0.12);
      outline-offset: 2px;
  }

  /* Larger readable labels */
  .form-label {
      font-weight: 600;
  }

  /* make the submission button prominent without setting colors */
  .btn-submit {
      font-weight: 700;
      padding: 0.9rem 1rem;
  }

  /* new mailchimp form testing  */

  /* Center Mailchimp form */
  .mc-centered {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
  }

  /* Override Mailchimp fixed width */
  #mc_embed_signup {
      width: 100% !important;
      max-width: 100%;
      background: transparent;
  }

  /* Inputs scale properly on mobile */
  #mc_embed_signup input[type="email"],
  #mc_embed_signup input[type="text"] {
      width: 100%;
      box-sizing: border-box;
  }

  /* Mobile spacing improvement */
  @media (max-width: 576px) {
      #mc_embed_signup h2 {
          font-size: 1.5rem;
      }
  }
  /* adding css to change text color on form  */
/* ============================= */
/* MAILCHIMP – THEME AWARE TEXT  */
/* ============================= */

/* Night mode (default) */
#mc_embed_signup,
#mc_embed_signup label,
#mc_embed_signup h2,
#mc_embed_signup p,
#mc_embed_signup .mc-field-group input {
    color: var(--text-color);
    transition: color 0.4s ease, border-color 0.4s ease;
}

/* Day mode override */
body.day-mode #mc_embed_signup,
body.day-mode #mc_embed_signup label,
body.day-mode #mc_embed_signup h2,
body.day-mode #mc_embed_signup p,
body.day-mode #mc_embed_signup .mc-field-group input {
    color: var(--day-text-color);
}

/* Inputs stay readable in both modes */
#mc_embed_signup input {
    background: transparent;
    border: 1px solid currentColor;
}

/* Placeholder text */
#mc_embed_signup input::placeholder {
    color: inherit;
    opacity: 0.7;
}

/* Required asterisk */
#mc_embed_signup .asterisk {
    color: currentColor;
}

/* Success / error messages follow theme */
#mce-success-response,
#mce-error-response {
    color: currentColor;
}

/* contact info text A tags  */
/* ===================================== */
/* CONTACT INFO COLOR BEHAVIOR BY THEME */
/* ===================================== */

/* 🌙 Night Mode (default) → BLACK */
.night-black-text,
.night-black-text h1,
.night-black-text li,
.night-black-text a {
    color: #ffffff;
    transition: color 0.4s ease;
}

/* ☀️ Day Mode → BLUE */
body.day-mode .night-black-text,
body.day-mode .night-black-text h1,
body.day-mode .night-black-text li,
body.day-mode .night-black-text a {
    color: #000000;
    /* matches your accent blue */
}

/* Optional: subtle hover clarity for links */
.night-black-text a:hover {
    opacity: 0.85;
}