/* =============================================================================
   Cobranzo brand · buttons
   ─────────────────────────────────────────────────────────────────────────────
   `.cob-btn` and variants — opt-in via the `cob-` prefix so they don't replace
   the legacy `.btn` in buttons.css.

   Pattern follows Fizzy's `_global.css` cascade: components are wrapped in
   `@layer components` so they can be overridden by app modules without
   specificity wars. Variants override the public `--cob-btn-*` config vars
   (instead of mutating private `--_*` slots) so consumers can tweak
   per-instance with a single inline style if needed.
   ============================================================================= */

@layer components {
  .cob-btn {
    align-items: center;
    background-color: var(--cob-btn-background, transparent);
    border: 1px solid var(--cob-btn-border-color, transparent);
    border-radius: var(--cob-btn-border-radius, var(--cob-r-md));
    color: var(--cob-btn-color, var(--cob-ink));
    cursor: pointer;
    display: inline-flex;
    font-family: var(--cob-font-body);
    font-size: var(--cob-btn-font-size, var(--cob-fs-small));
    font-weight: 600;
    gap: var(--cob-btn-gap, 0.5em);
    justify-content: center;
    line-height: 1;
    padding: var(--cob-btn-padding, 0.85em 1.35em);
    text-decoration: none;
    transition: background-color var(--cob-dur-fast) var(--cob-ease-out),
                color            var(--cob-dur-fast) var(--cob-ease-out),
                border-color     var(--cob-dur-fast) var(--cob-ease-out),
                transform        var(--cob-dur-fast) var(--cob-ease-out),
                box-shadow       var(--cob-dur-fast) var(--cob-ease-out);
    user-select: none;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--cob-btn-background-hover, var(--cob-btn-background));
      }
    }

    &:active:not(:disabled) {
      transform: scale(0.985);
    }

    &:focus-visible {
      box-shadow: var(--cob-focus-ring);
      outline: 0;
    }

    &:disabled,
    &[aria-disabled="true"] {
      cursor: not-allowed;
      opacity: 0.55;
    }

    /* Icon-only button: an svg as the only child means no text label
       — collapse to a square aspect ratio for proper hit target. */
    &:has(> svg:only-child) {
      aspect-ratio: 1;
      padding-inline: 0;
    }
  }

  /* Variants
  /* ------------------------------------------------------------------------ */

  .cob-btn--primary {
    --cob-btn-background:       var(--cob-terra);
    --cob-btn-background-hover: var(--cob-terra-h);
    --cob-btn-color:            var(--cob-cream);
  }

  .cob-btn--secondary {
    --cob-btn-background:       var(--cob-navy);
    --cob-btn-background-hover: var(--cob-navy-mid);
    --cob-btn-color:            var(--cob-cream);
  }

  .cob-btn--ghost {
    --cob-btn-background-hover: var(--cob-cream-dark);
    --cob-btn-border-color:     var(--cob-border);
    --cob-btn-color:            var(--cob-ink);
  }

  .cob-btn--text {
    --cob-btn-color:            var(--cob-ink);
    --cob-btn-padding:          0.5em 0.625em;

    @media (any-hover: hover) {
      &:hover { color: var(--cob-terra); }
    }
  }

  .cob-btn--danger {
    --cob-btn-background:       var(--cob-danger);
    --cob-btn-background-hover: color-mix(in oklab, var(--cob-danger) 85%, black);
    --cob-btn-color:            var(--cob-cream);
  }

  /* On dark surfaces use the cream halo for visibility */
  :where(.cob-bg-navy, .cob-bg-navy-deep, .cob-card--dark) .cob-btn:focus-visible {
    box-shadow: var(--cob-focus-ring-on-dark);
  }

  /* Sizes
  /* ------------------------------------------------------------------------ */

  .cob-btn--sm {
    --cob-btn-border-radius: var(--cob-r-sm);
    --cob-btn-font-size:     13px;
    --cob-btn-padding:       0.55em 0.95em;
  }

  .cob-btn--lg {
    --cob-btn-border-radius: var(--cob-r-md);
    --cob-btn-font-size:     15px;
    --cob-btn-padding:       0.95em 1.5em;
  }

  .cob-btn--block {
    inline-size: 100%;
  }

  /* Reduced motion
  /* ------------------------------------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .cob-btn {
      transition: none;

      &:active:not(:disabled) { transform: none; }
    }
  }

  /* App V2 shell buttons (.cb-btn) */
  .cb-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    font-family: var(--cob-font-display);
    font-weight: 600;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--cob-dur-fast) var(--cob-ease-out);
    border: 1px solid transparent;
    white-space: nowrap;
    text-decoration: none;
  }
  .cb-btn.primary { background: var(--cob-terra); color: var(--cob-cream); }
  .cb-btn.primary:hover { background: var(--cob-terra-h); }
  .cb-btn.ghost   { background: transparent; color: var(--cob-ink-2); border-color: var(--cob-border-2); }
  .cb-btn.ghost:hover { background: var(--cob-cream-dark); color: var(--cob-ink); border-color: var(--cob-ink-2); }
  .cb-btn.dark    { background: var(--cob-ink); color: var(--cob-cream); }
  .cb-btn.dark:hover { background: var(--cob-ink-2); }
  .cb-btn.danger  { background: var(--cob-red); color: var(--cob-cream); }
  .cb-btn.danger:hover { background: var(--cob-red-h); }
  .cb-btn.sm { padding: 6px 12px; font-size: 12px; }
  .cb-btn svg { inline-size: 14px; block-size: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
  .cb-btn:focus-visible { outline: none; box-shadow: var(--cob-focus-ring); }
}