/* ==========================================================================
   The 2 Tone Theme Toggle — presentation layer

   Every colour lives here. script.js never touches a colour value; it only
   adds or removes the .dark-mode class on <body>. That separation is the
   whole point of the assignment.
   ========================================================================== */

* {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   LIGHT THEME (the default)
   -------------------------------------------------------------------------- */
body {
  margin: 0;
  min-height: 100vh;

  /* Flexbox centres the card both horizontally and vertically. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;

  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  line-height: 1.6;

  background-color: #eef2f7;
  color: #1f2933;

  /* The smooth fade. Named properties only — never `all`, which would also
     animate layout and cost a repaint on every frame. */
  transition: background-color 0.35s ease, color 0.35s ease;
}

.card {
  width: 100%;
  max-width: 32rem;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  text-align: center;

  background-color: #ffffff;
  color: #1f2933;
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(31, 41, 51, 0.08);

  transition: background-color 0.35s ease, color 0.35s ease,
    border-color 0.35s ease, box-shadow 0.35s ease;
}

h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  line-height: 1.2;
}

p {
  margin: 0 0 1.75rem;
  color: #52606d;
  transition: color 0.35s ease;
}

button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;

  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 8px;

  background-color: #0b5d8a;
  color: #ffffff;

  transition: background-color 0.35s ease, color 0.35s ease,
    border-color 0.35s ease;
}

button:hover {
  background-color: #094a6e;
}

button:focus-visible {
  outline: 3px solid #0b5d8a;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   DARK THEME
   One class on <body> re-skins the page, the card and the button.
   -------------------------------------------------------------------------- */
body.dark-mode {
  background-color: #10151b;
  color: #e6edf3;
}

body.dark-mode .card {
  background-color: #1a2029;
  color: #e6edf3;
  border-color: #2d3742;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

body.dark-mode p {
  color: #aebac7;
}

body.dark-mode button {
  background-color: #4aa8e0;
  color: #0b1116;
}

body.dark-mode button:hover {
  background-color: #6dbcea;
}

body.dark-mode button:focus-visible {
  outline-color: #4aa8e0;
}

/* --------------------------------------------------------------------------
   Users who ask for less motion get the colour change instantly.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body,
  .card,
  p,
  button {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  button {
    width: 100%;
  }
}