/* Theme for /oso, following the OSO visual identity (purple #563FFF, green #55FF80) */

/* League Spartan — variable font, weight axis 100–900 (SIL Open Font License) */
@font-face {
  font-family: "League Spartan";
  src: url("/fonts/LeagueSpartan-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body.theme-oso {
  /* OSO visual identity */
  --oso-purple: #563fff;
  --oso-purple-ink: #3f28e6;
  --oso-green: #55ff80;
  --oso-ink: #14141f;

  /* Roles, overridden for dark mode below */
  --oso-accent: var(--oso-purple);
  --oso-tint: #eeebff;
  --oso-field-bg: #fff;

  color-scheme: light;
  --color-bg-0: #fff;
  --color-bg-40: #fff;
  --color-fg: var(--oso-ink);
  --color-line: #ddd;
  --color-link: var(--oso-accent);
  --color-button: var(--oso-purple);
  --color-button-text: #fff;
  --color-button-hover: var(--oso-purple-ink);

  font-family: "League Spartan", system-ui, sans-serif;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;

  .pane {
    border: 2px solid var(--oso-accent);
    border-radius: 28px;
    box-shadow: none;
    padding: clamp(1rem, 4vw, 2.5rem);
  }

  h1 {
    display: flex;
    align-items: center;
    gap: 0.3em;
    color: var(--oso-accent);
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;

    img {
      width: 1.2em;
      height: 1.2em;
      flex-shrink: 0;
    }
  }

  legend,
  fieldset > label {
    font-weight: 600;
  }

  .list-button {
    border: 2px solid var(--oso-accent);
    border-radius: 999px;
    color: var(--oso-accent);
    font-weight: 600;
    line-height: 2.8em;
    padding: 0.1em 1.4em 0;
    transition: background-color .15s ease, color .15s ease;

    &:hover {
      background-color: var(--oso-tint);
    }

    /* Green fill with purple text, as in the OSO icon */
    &:has(input:checked) {
      border: 2px solid var(--oso-purple);
      box-shadow: none;
      background-color: var(--oso-green);
      color: var(--oso-purple);
    }

    input[type="number"] {
      background-color: var(--oso-field-bg);
      color: var(--color-fg);
      border-radius: 999px;
    }
  }

  input[type="email"] {
    background-color: var(--oso-field-bg);
    border: 2px solid var(--oso-accent);
    border-radius: 999px;
    padding: 0.7em 1.2em;
    font-family: inherit;
    font-size: 1rem;
  }

  input[type="submit"] {
    border-radius: 999px;
    padding: 0.8em 1.8em;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    transition: transform .12s ease, background-color .15s ease;

    &:active {
      transform: translateY(1px);
    }
  }

  .pane + p {
    font-style: normal;
  }
}

@media (prefers-color-scheme: dark) {
  body.theme-oso {
    /* Brand purple is too dark for text on a dark background, so lighten it */
    --oso-accent: #a99cff;
    --oso-tint: #262145;
    --oso-field-bg: #1c1930;

    color-scheme: dark;
    --color-bg-0: #110f1f;
    --color-bg-40: #110f1f;
    --color-fg: #f2f0ff;
    --color-line: #3a3460;
  }
}