/* ==========================================================================
   Buttons
   Figma UI Kit "btn". Label typography comes from the typography system
   (.text-bold), so it is not repeated here.
   ========================================================================== */

@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 11.5rem; /* 184 */
    min-block-size: 3rem; /* 48 */
    padding: 0.5rem; /* 8 */
    border: 0;
    border-radius: var(--radius-button);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  /* Figma "Property 1=primary". White label as approved in Figma — its
     contrast on blue-green is below WCAG AA (open accessibility item). */
  .button--primary {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
  }

  /* Figma "Property 1=white": on the blue-green CTA card. */
  .button--white {
    background-color: var(--color-white);
    color: var(--color-black);
  }

  /* Figma "btn-secondary": regular label left, framed arrow icon right,
     on a translucent dark fill (used over images). */
  .button--secondary {
    justify-content: space-between;
    padding-inline: 1rem; /* 8 + 8 */
    background-color: var(--color-black-transparent-60);
    color: var(--color-white);
  }
}