/*
 * site/ohana-btn.css — Canonical button system for yourohana.org
 *
 * 7 variants × 3 sizes × state modifiers, all token-driven via CSS
 * custom properties at :root. Loaded by every page that uses canonical
 * buttons via <link rel="stylesheet" href="/ohana-btn.css?v=20260701a">.
 *
 * Spec: docs/superpowers/specs/2026-05-17-button-brand-system-design.md
 * Audit:  python3 tools/button_brand_audit.py
 *
 * Usage:
 *   <button class="ohana-btn ohana-btn-primary">Save</button>
 *   <button class="ohana-btn ohana-btn-secondary ohana-btn-sm">Cancel</button>
 *   <button class="ohana-btn ohana-btn-danger ohana-btn-lg">Delete</button>
 *   <button class="ohana-btn ohana-btn-icon" aria-label="Close">×</button>
 *
 * Variants: primary, secondary, danger, ghost, icon, success, warning.
 * Sizes:    sm, (default), lg. The base class is the default size.
 * States:   :hover, :active, :focus-visible, [disabled],
 *           [data-loading="true"].
 */

:root {
  /* ── Variant fills ─────────────────────────────────────────
   * Brand-derived tokens reference the canonical palette in
   * ohana-base.css via var(--brand-*, fallback). Recoloring the
   * brand there recolors every button; the literal fallback keeps
   * self-contained pages (print views, Resource Manager) correct
   * when ohana-base.css isn't loaded. Success/warning have no
   * brand token — this file is their single source of truth.  */
  --ohana-btn-primary-bg:        var(--brand-blue, #00BAC6);
  --ohana-btn-primary-bg-hover:  var(--brand-blue-dark, #0097a7);
  --ohana-btn-danger-fg:         var(--brand-pink, #ED1B67);
  --ohana-btn-danger-bg-hover:   var(--brand-pink, #ED1B67);
  --ohana-btn-success-bg:        #2D9B4A;
  --ohana-btn-success-bg-hover:  #248038;
  --ohana-btn-warning-bg:        #E89400;
  --ohana-btn-warning-bg-hover:  #C97D00;

  /* ── Foreground text ───────────────────────────────────── */
  --ohana-btn-text-light:        #fff;
  --ohana-btn-text-dark:         var(--text-dark, #333);
  --ohana-btn-text-teal:         #1F8D95;

  /* ── Structure ─────────────────────────────────────────── */
  --ohana-btn-radius:            999px;     /* pill */
  --ohana-btn-radius-square:     8px;       /* icon */
  --ohana-btn-focus-ring:        #1F8D95;
  --ohana-btn-focus-ring-width:  2px;
  --ohana-btn-focus-ring-offset: 2px;

  /* ── Sizing ────────────────────────────────────────────── */
  --ohana-btn-padding-sm:        0.30rem 0.70rem;
  --ohana-btn-padding-md:        0.50rem 1.10rem;
  --ohana-btn-padding-lg:        0.70rem 1.50rem;
  --ohana-btn-font-sm:           0.82rem;
  --ohana-btn-font-md:           0.92rem;
  --ohana-btn-font-lg:           1.00rem;
  --ohana-btn-minheight-sm:      28px;
  --ohana-btn-minheight-md:      38px;
  --ohana-btn-minheight-lg:      48px;
}

/* ── Base ────────────────────────────────────────────────── */

.ohana-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  vertical-align: middle;

  font-family: inherit;
  font-size: var(--ohana-btn-font-md);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: 0;

  padding: var(--ohana-btn-padding-md);
  min-height: var(--ohana-btn-minheight-md);

  border-radius: var(--ohana-btn-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;

  background: transparent;
  color: var(--ohana-btn-text-dark);
}

.ohana-btn:focus-visible {
  outline: var(--ohana-btn-focus-ring-width) solid var(--ohana-btn-focus-ring);
  outline-offset: var(--ohana-btn-focus-ring-offset);
}

.ohana-btn:active { transform: translateY(1px); }

.ohana-btn[disabled],
.ohana-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.ohana-btn[data-loading="true"] {
  cursor: progress;
  pointer-events: none;
}
.ohana-btn[data-loading="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: ohana-btn-spin 0.6s linear infinite;
}
@keyframes ohana-btn-spin {
  to { transform: rotate(360deg); }
}

.ohana-btn svg,
.ohana-btn .ohana-btn-icon-glyph {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
}

/* ── Variants ───────────────────────────────────────────── */

.ohana-btn-primary {
  background: var(--ohana-btn-primary-bg);
  color: var(--ohana-btn-text-light);
  border-color: var(--ohana-btn-primary-bg);
}
.ohana-btn-primary:hover {
  background: var(--ohana-btn-primary-bg-hover);
  border-color: var(--ohana-btn-primary-bg-hover);
  box-shadow: 0 2px 8px rgba(0, 186, 198, 0.28);
}

.ohana-btn-secondary {
  background: #fff;
  color: var(--ohana-btn-primary-bg);
  border-color: var(--ohana-btn-primary-bg);
}
.ohana-btn-secondary:hover {
  background: var(--ohana-btn-primary-bg);
  color: var(--ohana-btn-text-light);
  box-shadow: 0 2px 8px rgba(0, 186, 198, 0.28);
}

.ohana-btn-danger {
  background: #fff;
  color: var(--ohana-btn-danger-fg);
  border-color: var(--ohana-btn-danger-fg);
}
.ohana-btn-danger:hover {
  background: var(--ohana-btn-danger-bg-hover);
  color: var(--ohana-btn-text-light);
  box-shadow: 0 2px 8px rgba(237, 27, 103, 0.28);
}

.ohana-btn-ghost {
  background: transparent;
  color: var(--ohana-btn-text-teal);
  border-color: transparent;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.ohana-btn-ghost:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ohana-btn-icon {
  width: var(--ohana-btn-minheight-md);
  height: var(--ohana-btn-minheight-md);
  padding: 0;
  border-radius: var(--ohana-btn-radius-square);
  background: transparent;
  color: var(--ohana-btn-text-teal);
  border-color: transparent;
}
.ohana-btn-icon:hover { background: rgba(0, 186, 198, 0.10); }
.ohana-btn-icon.ohana-btn-sm {
  width: var(--ohana-btn-minheight-sm);
  height: var(--ohana-btn-minheight-sm);
}
.ohana-btn-icon.ohana-btn-lg {
  width: var(--ohana-btn-minheight-lg);
  height: var(--ohana-btn-minheight-lg);
}

.ohana-btn-success {
  background: var(--ohana-btn-success-bg);
  color: var(--ohana-btn-text-light);
  border-color: var(--ohana-btn-success-bg);
}
.ohana-btn-success:hover {
  background: var(--ohana-btn-success-bg-hover);
  border-color: var(--ohana-btn-success-bg-hover);
  box-shadow: 0 2px 8px rgba(45, 155, 74, 0.25);
}

.ohana-btn-warning {
  background: var(--ohana-btn-warning-bg);
  color: var(--ohana-btn-text-light);
  border-color: var(--ohana-btn-warning-bg);
}
.ohana-btn-warning:hover {
  background: var(--ohana-btn-warning-bg-hover);
  border-color: var(--ohana-btn-warning-bg-hover);
  box-shadow: 0 2px 8px rgba(232, 148, 0, 0.25);
}

/* ── Sizes ──────────────────────────────────────────────── */

.ohana-btn-sm {
  padding: var(--ohana-btn-padding-sm);
  font-size: var(--ohana-btn-font-sm);
  min-height: var(--ohana-btn-minheight-sm);
}
.ohana-btn-lg {
  padding: var(--ohana-btn-padding-lg);
  font-size: var(--ohana-btn-font-lg);
  min-height: var(--ohana-btn-minheight-lg);
}