/* assets/css/components/button.css
 * @layer components — .btn BEM block
 * ════════════════════════════════════════════════════════════════════
 *
 * Squish-inset sizing pattern: em-based padding scales with font-size.
 * Vertical padding is intentionally less than horizontal (§9 tokens).
 *
 * Token sources: §9 --btn-*, §13 --radius-*, §15 --duration-*, §17 --focus-*
 * ════════════════════════════════════════════════════════════════════ */


@layer components {

  /* ════════════════════════════════════════════════════════════════════
     Base .btn
     ════════════════════════════════════════════════════════════════════ */

  .btn,
  .button {
    /* Layout */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-icon-gap);

    /* Sizing */
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    min-inline-size: var(--btn-min-inline-size);

    /* Typography */
    font-family: var(--font-body);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    white-space: nowrap;

    /* Appearance */
    border-radius: var(--btn-radius);
    border: 2px solid transparent;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;

    /* Transition — all interactive properties at once */
    transition:
      background-color var(--btn-transition),
      color            var(--btn-transition),
      border-color     var(--btn-transition),
      box-shadow       var(--btn-transition),
      transform        var(--duration-instant) var(--ease-default);
  }

  /* Focus ring */
  .btn:focus-visible,
  .button:focus-visible {
    outline: var(--btn-focus-ring);
    outline-offset: var(--btn-focus-offset);
  }

  /* Press feedback — subtle downward shift */
  .btn:active:not(:disabled):not([aria-disabled="true"]),
  .button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px);
  }

  /* Disabled state */
  .btn:disabled,
  .btn[aria-disabled="true"],
  .button:disabled,
  .button[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }


  /* ════════════════════════════════════════════════════════════════════
     Variants
     ════════════════════════════════════════════════════════════════════ */

  /* ── Primary — white on teal · 4.67:1 ✅ AA ── */

  .btn--primary,
  .button--primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: var(--btn-primary-shadow);
  }

  .btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
  .button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--btn-primary-bg-hover);
  }

  .btn--primary:active:not(:disabled):not([aria-disabled="true"]),
  .button--primary:active:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--btn-primary-bg-active);
    box-shadow: none;
  }

  /* ── Secondary — black on blush · 16.03:1 ✅ AAA ── */

  .btn--secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
  }

  .btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--btn-secondary-bg-hover);
  }

  .btn--secondary:active:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--btn-secondary-bg-active);
  }

  /* ── Outline — teal border and text on transparent ── */

  .btn--outline {
    background-color: transparent;
    border-color: var(--btn-outline-border);
    color: var(--btn-outline-text);
  }

  .btn--outline:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--btn-outline-bg-hover);
    color: var(--btn-outline-text-hover);
    border-color: var(--btn-outline-bg-hover);
  }

  /* ── Outline Light — transparent with white border, for dark backgrounds ── */

  .btn--outline-light {
    background-color: transparent;
    border-color: color-mix(in oklch, var(--white) 50%, transparent);
    color: var(--text-on-dark);
  }

  .btn--outline-light:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: color-mix(in oklch, var(--white) 12%, transparent);
    border-color: var(--text-on-dark);
    color: var(--text-on-dark);
  }

  /* ── Ghost — text-only, subtle hover fill ── */

  .btn--ghost {
    background-color: transparent;
    color: var(--btn-ghost-text);
    min-inline-size: unset;
  }

  .btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--btn-ghost-bg-hover);
  }

  /* ── Danger — error red · 6.33:1 ✅ AA ── */

  .btn--danger {
    background-color: var(--btn-danger-bg);
    color: var(--btn-danger-text);
  }

  .btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--btn-danger-bg-hover);
  }

  .btn--danger:active:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--btn-danger-bg-active);
  }

  /* ── Neutral light — white button for use on dark backgrounds ── */

  .btn--neutral-light {
    background-color: var(--btn-neutral-light-bg);
    color: var(--btn-neutral-light-text);
  }

  .btn--neutral-light:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--btn-neutral-light-bg-hover);
  }

  /* ── Neutral dark — black button for use on light backgrounds ── */

  .btn--neutral-dark {
    background-color: var(--btn-neutral-dark-bg);
    color: var(--btn-neutral-dark-text);
  }

  .btn--neutral-dark:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--btn-neutral-dark-bg-hover);
  }


  /* ════════════════════════════════════════════════════════════════════
     Size modifiers
     ════════════════════════════════════════════════════════════════════ */

  /* Small — ~34px target height at 16px base */
  .btn--s {
    padding-block: var(--btn-s-padding-block);
    padding-inline: var(--btn-s-padding-inline);
    font-size: var(--btn-s-font-size);
  }

  /* Large — ~48px target height (8pt grid ✅) */
  .btn--l {
    padding-block: var(--btn-l-padding-block);
    padding-inline: var(--btn-l-padding-inline);
    font-size: var(--btn-l-font-size);
  }


  /* ════════════════════════════════════════════════════════════════════
     Layout modifiers
     ════════════════════════════════════════════════════════════════════ */

  /* Full-width — fills its container */
  .btn--block {
    inline-size: 100%;
    min-inline-size: unset;
  }

  /* Icon-only — square aspect, no min-width */
  .btn--icon {
    padding-inline: var(--btn-padding-block);  /* same as block → square */
    min-inline-size: unset;
    aspect-ratio: var(--ratio-square);
  }

  .btn--icon.btn--s {
    padding-inline: var(--btn-s-padding-block);
  }

  .btn--icon.btn--l {
    padding-inline: var(--btn-l-padding-block);
  }


  /* ════════════════════════════════════════════════════════════════════
     Loading state
     ════════════════════════════════════════════════════════════════════ */

  .btn--loading {
    color: transparent;
    pointer-events: none;
  }

  /* Spinner via pseudo-element */
  .btn--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: var(--radius-full);
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    animation: btn-spin var(--duration-slow) linear infinite;
  }

  /* Restore spinner colour per variant (body color: transparent hides label) */
  .btn--primary.btn--loading::after      { color: var(--btn-primary-text); }
  .btn--secondary.btn--loading::after    { color: var(--btn-secondary-text); }
  .btn--outline.btn--loading::after      { color: var(--btn-outline-text); }
  .btn--ghost.btn--loading::after        { color: var(--btn-ghost-text); }
  .btn--danger.btn--loading::after       { color: var(--btn-danger-text); }
  .btn--neutral-light.btn--loading::after { color: var(--btn-neutral-light-text); }
  .btn--neutral-dark.btn--loading::after  { color: var(--btn-neutral-dark-text); }

  @keyframes btn-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }


  /* ════════════════════════════════════════════════════════════════════
     V3 Icon Buttons — Squared with arrow circle
     ════════════════════════════════════════════════════════════════════ */

  /* Shared base for all icon button variants */
  [class*="btn--icon-"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-m);
    border-radius: var(--radius-m);
    border: var(--line-thin, 1px) solid color-mix(in oklch, var(--white) 10%, transparent);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    font-style: normal;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default),
      box-shadow       var(--duration-fast) var(--ease-default);
  }

  /* Arrow circle */
  .btn__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    inline-size: var(--space-xl);
    block-size: var(--space-xl);
    border-radius: var(--radius-s);
    transition: background-color var(--duration-fast) var(--ease-default);
  }

  .btn__arrow {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    flex-shrink: 0;
  }

  /* ── Primary (teal) ── */
  .btn--icon-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
  }
  .btn--icon-primary .btn__circle {
    background-color: color-mix(in oklch, var(--white) 13%, transparent);
  }
  .btn--icon-primary:hover {
    background-color: var(--btn-primary-bg-hover);
  }
  .btn--icon-primary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* ── Secondary (peach) ── */
  .btn--icon-secondary {
    background-color: var(--secondary);
    color: var(--text-on-secondary);
    border-color: color-mix(in oklch, var(--black) 3%, transparent);
  }
  .btn--icon-secondary .btn__circle {
    background-color: color-mix(in oklch, var(--black) 6%, transparent);
  }
  .btn--icon-secondary:hover {
    background-color: var(--secondary-hover);
  }

  /* ── Dark ── */
  .btn--icon-dark {
    background-color: var(--surface-dark);
    color: var(--text-on-dark);
    border-color: color-mix(in oklch, var(--white) 7%, transparent);
  }
  .btn--icon-dark .btn__circle {
    background-color: color-mix(in oklch, var(--white) 8%, transparent);
  }
  .btn--icon-dark:hover {
    background-color: var(--neutral-ultra-dark);
  }

  /* ── Outline ── */
  .btn--icon-outline {
    background-color: transparent;
    color: var(--text-accent);
    border: var(--line-thin, 1px) solid var(--text-accent);
  }
  .btn--icon-outline .btn__circle {
    background-color: var(--surface-primary);
    color: var(--text-on-primary);
  }
  .btn--icon-outline:hover {
    background-color: color-mix(in oklch, var(--surface-primary) 6%, transparent);
  }

  /* ── Pill modifier ── */
  .btn--icon-pill {
    border-radius: var(--radius-full);
  }
  .btn--icon-pill .btn__circle {
    border-radius: var(--radius-full);
  }

  /* ── Size: Small ── */
  .btn--s[class*="btn--icon-"] {
    padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) var(--space-s);
    gap: var(--space-xs);
    font-size: var(--text-xs);
  }
  .btn--s .btn__circle {
    inline-size: var(--space-l);
    block-size: var(--space-l);
  }
  .btn--s .btn__arrow {
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }

  /* ── Size: Large ── */
  .btn--l[class*="btn--icon-"] {
    padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-l);
    gap: var(--space-m);
    font-size: var(--text-m);
  }
  .btn--l .btn__circle {
    inline-size: var(--space-2xl);
    block-size: var(--space-2xl);
  }
  .btn--l .btn__arrow {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

}