/* ==========================================================================
   TABIFLOW V2 — Button System
   --------------------------------------------------------------------------
   File: styles/components/buttons.css
   Source: Mock-up/planner-v2-mockup.html Section 1b (Day 8, locked)
   Load order: After tokens.css, before styles.css overrides

   All rules scoped under html.tf-v2panel — V1 buttons are unaffected
   until the feature flag is enabled (?v2panel=1).
   Selector uses html element prefix for specificity (0,2,1) to beat
   context-specific rules in styles.css at (0,2,0) e.g. .planner-entry-actions .btn.

   Variants: primary, secondary, ghost, danger, warn, tabi
   Sizes:    sm (32px), md (44px min), lg (52px min)
   Modifiers: icon, full, pill, disabled-info
   ========================================================================== */

html.tf-v2panel .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tf-space-sm);
  border: 1px solid transparent;
  border-radius: var(--tf-radius-md);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--tf-duration-fast) var(--tf-ease),
    border-color var(--tf-duration-fast) var(--tf-ease),
    color var(--tf-duration-fast) var(--tf-ease),
    transform var(--tf-duration-fast) var(--tf-ease);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  white-space: nowrap;
}

html.tf-v2panel .btn:focus-visible {
  outline: none;
  box-shadow: var(--tf-focus-ring);
}

html.tf-v2panel .btn:active:not(:disabled) {
  transform: scale(0.98);
}

html.tf-v2panel .btn:disabled,
html.tf-v2panel .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Sizes --- */

html.tf-v2panel .btn-sm {
  height: 32px;
  padding: 0 var(--tf-space-md);
  font-size: 12px;
}

html.tf-v2panel .btn-md {
  min-height: var(--tf-tap-min);
  padding: var(--tf-space-sm) var(--tf-space-lg);
  font-size: 14px;
}

html.tf-v2panel .btn-lg {
  min-height: 52px;
  padding: var(--tf-space-md) var(--tf-space-xl);
  font-size: 15px;
}

/* --- Variant: Primary --- */

html.tf-v2panel .btn-primary {
  background: var(--tf-primary);
  color: var(--tf-primary-ink);
  border-color: var(--tf-primary);
}

html.tf-v2panel .btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

/* --- Variant: Secondary --- */

html.tf-v2panel .btn-secondary {
  background: var(--tf-bg-elevated);
  color: var(--tf-text-primary);
  border-color: var(--tf-border-soft);
}

html.tf-v2panel .btn-secondary:hover:not(:disabled) {
  background: var(--tf-bg-elevated-2);
}

/* --- Variant: Ghost --- */

html.tf-v2panel .btn-ghost {
  background: transparent;
  color: var(--tf-text-secondary);
  border-color: transparent;
}

html.tf-v2panel .btn-ghost:hover:not(:disabled) {
  background: var(--tf-bg-elevated);
  color: var(--tf-text-primary);
}

/* §23-FIX-CASCADE-2: defeat body .tf-topbar .btn { color: rgba(244,247,251,0.72) } at (0,2,1).
   .tf-topbar is hidden under html.tf-v2shell but visible under v2panel-only testing.
   "no more old looks" principle: fix on V2 surface regardless of beta visibility. */
html.tf-v2panel .tf-topbar .btn-ghost {
  color: var(--tf-text-secondary);
  border-color: transparent;
}

/* --- Variant: Danger --- */

html.tf-v2panel .btn-danger {
  background: rgba(236, 94, 138, 0.14);
  color: var(--tf-danger);
  border-color: rgba(236, 94, 138, 0.32);
}

html.tf-v2panel .btn-danger:hover:not(:disabled) {
  background: rgba(236, 94, 138, 0.22);
}

html.tf-v2panel .btn-danger:focus-visible {
  box-shadow: var(--tf-focus-ring-danger);
}

/* --- Variant: Warn (Mochi-tone) --- */

html.tf-v2panel .btn-warn {
  background: var(--tf-mochi-bg);
  color: var(--tf-warn);
  border-color: var(--tf-mochi-border);
}

html.tf-v2panel .btn-warn:hover:not(:disabled) {
  background: rgba(245, 166, 35, 0.22);
}

/* --- Variant: Tabi (route / navigation) --- */

html.tf-v2panel .btn-tabi {
  background: var(--tf-tabi-bg);
  color: var(--tf-day-3-teal);
  border-color: var(--tf-tabi-border);
}

html.tf-v2panel .btn-tabi:hover:not(:disabled) {
  background: rgba(43, 184, 184, 0.22);
}

/* --- Modifier: Icon button (square, tap-target safe) --- */

html.tf-v2panel .btn-icon {
  width: var(--tf-tap-min);
  height: var(--tf-tap-min);
  min-width: var(--tf-tap-min);
  padding: 0;
  border-radius: var(--tf-radius-md);
}

html.tf-v2panel .btn-icon.btn-sm {
  width: 36px;
  height: 36px;
  min-width: 36px;
}

/* --- Modifier: Full-width --- */

html.tf-v2panel .btn-full {
  width: 100%;
}

/* --- Modifier: Pill --- */

html.tf-v2panel .btn-pill {
  border-radius: var(--tf-radius-full);
}

/* --- Modifier: Disabled-info (Coming v1.5 items) --- */

html.tf-v2panel .btn-disabled-info {
  background: transparent;
  color: var(--tf-text-muted);
  border-color: var(--tf-border-soft);
  border-style: dashed;
  cursor: default;
  pointer-events: none;
}

/* --- Accessibility: reduce motion --- */

@media (prefers-reduced-motion: reduce) {
  html.tf-v2panel .btn {
    transition: none;
  }
}