:root {
  /* Base / Background */
  --color-bg-primary: #050e3c; /* päätausta, lähes musta sininen */
  --color-bg-secondary: #002455; /* kortit, headerit, pinnat */

  --color-bg-card: #fbefef; /* korttien tausta */

  /* Text */
  --color-text-primary: #ffffff;
  --color-text-secondary: #cfd6ff; /* vaalea kontrasti tummalle taustalle */
  --color-text-muted: #9aa4d1;

  /* Brand / Accent */
  --color-accent-primary: #dc0000; /* pääaccent, CTA */
  --color-accent-secondary: #ff3838; /* hover / highlight */

  /* Borders & UI */
  --color-border-default: #1a2f66;
  --color-border-accent: #dc0000;
  --border-radius: 20px;

  /* States */
  --color-success: #009440;
  --color-error: #dc0000;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow-y: auto;
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--color-bg-primary);
  background-image: url("/gym-small.jpg");
  background-repeat: no-repeat;
  background-position: center;

  @media screen and (min-width: 800px) {
    background-image: url("/gym-medium.jpg");
  }
  @media screen and (min-width: 1300px) {
    background-image: url("/gym-large.jpg");
  }
}

body {
  margin: 10dvh auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background-color: var(--color-bg-card);
  padding: 30px;
  border-radius: var(--border-radius);
  max-width: 90dvw;

  @media screen and (min-width: 800px) {
    max-width: 600px;
  }

  * {
    font-size: 16px;
  }

  header {
    h1,
    p {
      margin-bottom: 0;
    }
    h1 {
      font-size: 2rem;
    }
    p {
      font-size: 1.3rem;
    }
  }

  section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;

    ul {
      list-style: none;
      padding-left: 30px;

      li {
        color: #000;

        &::marker {
          content: "✔ ";
          color: #000;
          font-size: 1.5rem;
        }
      }
    }

    button {
      background-color: var(--color-bg-primary);
      padding: 20px;
      border: 0;
      border-radius: var(--border-radius);
      color: #fff;
      font-size: 1.5rem;
      cursor: pointer;
      margin: 0 auto;
    }

    form#subscribe {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 10px;

      input {
        border-radius: var(--border-radius);
        padding: 10px;
        width: 100%;

        @media screen and (min-width: 400px) {
          width: 350px;
        }
      }

      button {
        font-size: 1rem;
        padding: 10px;
      }

      .feedback {
        min-height: 1.2em;
        font-weight: 600;
        text-align: center;
      }

      .feedback.success {
        color: var(--color-success);
      }

      .feedback.error {
        color: var(--color-error);
      }

      .disclaimer {
        font-size: 0.9rem;
        font-style: italic;
      }
    }
  }
}