/* Eén knop, vier verschijningsvormen. Meer varianten dan dit betekent
   dat de tokens niet kloppen. */

@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.7em 1.4em;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--motion), color var(--motion), border-color var(--motion), transform var(--motion);
  }

  .button:hover {
    transform: translateY(-1px);
  }

  .button--primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }

  .button--primary:hover {
    background: var(--color-accent-strong);
  }

  .button--ink {
    background: var(--color-ink);
    color: #ffffff;
  }

  .button--ink:hover {
    background: #2b2d36;
  }

  .button--ghost {
    background: transparent;
    border-color: var(--color-line);
    color: var(--color-ink);
  }

  .button--ghost:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .button--on-dark {
    background: rgb(255 255 255 / 0.08);
    border-color: rgb(255 255 255 / 0.28);
    color: #ffffff;
  }

  .button--on-dark:hover {
    background: rgb(255 255 255 / 0.16);
  }

  .button--light {
    background: #ffffff;
    color: var(--color-ink);
  }

  /* Tekstlink met pijl: het rustige alternatief naast een knop. */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
  }

  .link-arrow::after {
    content: '\203A';
    font-size: 1.3em;
    line-height: 1;
    transition: transform var(--motion);
  }

  .link-arrow:hover::after {
    transform: translateX(3px);
  }

  .section--dark .link-arrow {
    color: #a5b4fc;
  }
}