@layer reset, tokens, base, layout, components;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  h1,
  h2,
  p,
  ul {
    margin: 0;
  }

  ul {
    padding: 0;
    list-style: none;
  }

  button,
  input,
  select {
    font: inherit;
    color: inherit;
  }
}

@layer tokens {
  :root {
    color-scheme: dark;

    --bg: #101216;
    --surface: #171a1f;
    --surface-raised: #1e222a;
    --border: #282d35;
    --border-strong: #39404b;

    --text: #e6e8ec;
    --text-muted: #939ba7;
    --text-faint: #6d757f;

    --accent: #e89340;
    --accent-strong: #f2a55a;
    --accent-contrast: #17110a;
    --danger: #e0655f;

    --radius: 6px;
    --radius-lg: 10px;

    --control-height: 1.9rem;
    --gap: 0.6rem;

    --font-sans: system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", menlo, consolas, monospace;

    /* Shared by the headings row and every parameter row so they stay aligned. */
    --parameter-columns: minmax(9rem, 1fr) 6rem 5.5rem 5rem 5rem 4rem 5.5rem;
  }
}

@layer base {
  body {
    padding: 2.5rem 1.5rem 4rem;
    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
  }

  h1 {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
  }

  h2 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  a {
    color: var(--accent);
    text-underline-offset: 0.2em;

    &:hover {
      color: var(--accent-strong);
    }
  }
}

@layer layout {
  header,
  main,
  footer {
    width: min(64rem, 100%);
    margin-inline: auto;
  }

  header {
    margin-bottom: 1.75rem;

    p {
      color: var(--text-muted);
    }
  }

  main {
    display: grid;
    gap: 1rem;
  }

  /* Sections are flex rows: a full-width child forces whatever follows onto a
     new line, which keeps the markup free of layout-only wrappers. */
  main > section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--gap);
    padding: 1rem 1.15rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  main > section > h2 {
    flex-basis: 100%;
    margin-bottom: 0.15rem;
  }

  footer {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--text-faint);
  }
}

@layer components {
  label {
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  input,
  select {
    height: var(--control-height);
    padding-inline: 0.5rem;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);

    &:hover {
      border-color: var(--text-faint);
    }

    &:focus-visible {
      border-color: var(--accent);
      outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
      outline-offset: 1px;
    }
  }

  input[type="number"] {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
  }

  input[type="checkbox"] {
    height: auto;
    accent-color: var(--accent);
  }

  input[type="file"] {
    padding: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: none;
    border: none;

    &::file-selector-button {
      height: var(--control-height);
      margin-right: 0.6rem;
      padding-inline: 0.75rem;
      font-size: 0.85rem;
      color: var(--text);
      cursor: pointer;
      background: var(--surface-raised);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius);
    }

    &::file-selector-button:hover {
      background: color-mix(in srgb, var(--surface-raised) 70%, white);
      border-color: var(--text-faint);
    }
  }

  button {
    height: var(--control-height);
    padding-inline: 0.75rem;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition:
      background 0.12s ease,
      border-color 0.12s ease;

    &:hover {
      background: color-mix(in srgb, var(--surface-raised) 70%, white);
      border-color: var(--text-faint);
    }

    &:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }

    &:disabled {
      color: var(--text-faint);
      cursor: not-allowed;
      background: var(--surface);

      &:hover {
        background: var(--surface);
        border-color: var(--border-strong);
      }
    }
  }

  #editor-status {
    flex-basis: 100%;
    font-size: 0.85rem;
    color: var(--text-faint);

    &:empty {
      display: none;
    }
  }

  #midi-status {
    flex-basis: 100%;
    font-size: 0.85rem;
    color: var(--text-faint);

    &:empty {
      display: none;
    }
  }

  #parameter-headings {
    display: grid;
    flex-basis: 100%;
    grid-template-columns: var(--parameter-columns);
    gap: 0.35rem;
    padding: 0 0.5rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 1px solid var(--border);
  }

  #parameter-rows {
    display: grid;
    flex-basis: 100%;
    gap: 2px;
    margin-top: 0.35rem;
  }

  .parameter {
    display: grid;
    grid-template-columns: var(--parameter-columns);
    gap: 0.35rem;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius);

    &:hover {
      background: var(--surface-raised);
    }

    input,
    select {
      width: 100%;
    }

    .parameter-enabled {
      justify-self: center;
    }

    .parameter-remove {
      font-size: 0.75rem;
      color: var(--text-faint);
      background: none;
      border-color: transparent;

      &:hover {
        color: var(--danger);
        background: none;
        border-color: color-mix(in srgb, var(--danger) 45%, transparent);
      }
    }
  }

  #add-parameter {
    margin-top: 0.9rem;
  }

  #randomise {
    height: 2.4rem;
    margin-top: 0.9rem;
    margin-left: auto;
    padding-inline: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-contrast);
    letter-spacing: 0.02em;
    background: var(--accent);
    border-color: var(--accent);

    &:hover {
      background: var(--accent-strong);
      border-color: var(--accent-strong);
    }
  }
}