/* .btn (DESIGN.md §5 Button): dark by default; --primary is lime, one per
   page (the form's submit); --light for a dark band; --small for the header.
   Modifiers change colour or size only. */
@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-s);
    background: var(--color-text);
    color: var(--color-surface);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: 500;
    text-align: center;
    /* The Tip ons text (#216) runs to two lines on phones: even them out. */
    text-wrap: balance;
    text-decoration: none;
    cursor: pointer;

    &:hover { background: var(--color-graphite); color: var(--color-surface); text-decoration: none; }
    &:disabled { opacity: 0.6; cursor: progress; }
  }

  .btn--primary {
    background: var(--color-action);
    color: var(--color-text);

    &:hover { background: var(--color-action); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-text); }
  }

  .btn--light {
    background: var(--color-surface);
    color: var(--color-text);

    &:hover { background: var(--color-paper); color: var(--color-ink); }
  }

  .btn--small {
    min-height: 0;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  /* On a dark surface the focus ring has to be light. */
  .band--dark :focus-visible { outline-color: var(--color-surface); }
}