/* Arganan buttons: the one definition for the app and the landing.

   Plain CSS on the --ds-* tokens (design_tokens.css), so it works with or
   without Tailwind:
   - the app imports it into @layer components (application.css), where
     Tailwind utilities (min-h-11, w-full...) still win;
   - the landing links it directly (layouts/landing), after design_tokens.

   Markup: .btn + one tone, optionally one size.
     Tones:  .btn-primary .btn-secondary .btn-ghost .btn-accent
             .btn-danger .btn-danger-soft .btn-warning
     Sizes:  .btn-sm (compact rows), .btn-lg (marketing CTAs; .btn-large is
             the same size under its older name)
     Style:  .btn-landing — the marketing look (display face, rounder, a lift
             on hover, outlined secondary). Same tones, different finish.
   Live samples of every combination: /dev/palette (development). */

/* ── Base (app look) ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  /* Same values as Tailwind's text-sm here; the landing has no Tailwind. */
  font-size: var(--text-sm, 0.9375rem);
  line-height: var(--text-sm--line-height, 1.375rem);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:disabled, .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.btn svg { flex-shrink: 0; }

.btn-sm {
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-xs, 0.8125rem);
  line-height: var(--text-xs--line-height, 1.25rem);
  border-radius: 0.4375rem;
}

.btn-primary { background-color: var(--ds-color-primary); color: var(--ds-color-on-primary); box-shadow: 0 1px 2px rgb(15 23 42 / .12); }
.btn-primary:hover:not(:disabled, [aria-disabled=true]) { background-color: var(--ds-color-primary-hover); }

.btn-secondary { background-color: var(--ds-color-bg-elevated); color: var(--ds-color-text); border-color: var(--ds-color-field-border); box-shadow: 0 1px 2px rgb(15 23 42 / .05); }
.btn-secondary:hover:not(:disabled, [aria-disabled=true]) { background-color: var(--ds-color-bg); border-color: var(--ds-color-border-strong); }

.btn-accent { background-color: var(--ds-color-accent); color: var(--ds-color-on-accent); }
.btn-accent:hover:not(:disabled, [aria-disabled=true]) { background-color: var(--ds-color-accent-hover); }

.btn-danger { background-color: var(--ds-danger-solid); color: var(--ds-danger-on-solid); }
.btn-danger:hover:not(:disabled, [aria-disabled=true]) { background-color: color-mix(in oklab, var(--ds-danger-solid) 88%, black); }

.btn-danger-soft { background-color: var(--ds-danger-bg); color: var(--ds-danger-fg); border-color: var(--ds-danger-border); }
.btn-danger-soft:hover:not(:disabled, [aria-disabled=true]) { background-color: var(--ds-danger-border); }

.btn-warning { background-color: var(--ds-warning-solid); color: var(--ds-warning-on-solid); }
.btn-warning:hover:not(:disabled, [aria-disabled=true]) { background-color: color-mix(in oklab, var(--ds-warning-solid) 90%, black); }

.btn-ghost { background-color: transparent; color: var(--ds-color-text-soft); }
.btn-ghost:hover:not(:disabled, [aria-disabled=true]) { background-color: var(--ds-color-bg); color: var(--ds-color-text); }

/* ── Landing finish (.btn-landing) ─────────────────────────────────────── */
/* Rules carry .btn-landing plus the tone so they outrank the app hovers.
   Hovers skip disabled buttons, like the base tones: no lift, no color shift. */
.btn-landing {
  min-height: auto;
  padding: 12px 24px;
  border: 0;
  border-radius: 12px;
  font-family: var(--ds-font-display);
  font-size: 15px;
  line-height: inherit;
  box-shadow: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
/* A submit input doesn't inherit line-height; keep the browser's. */
input.btn-landing { line-height: normal; }

.btn-landing.btn-primary { background: var(--ds-color-primary); color: var(--ds-color-on-primary); box-shadow: none; }
.btn-landing.btn-primary:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--ds-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ds-color-primary) 22%, transparent);
}

.btn-landing.btn-secondary { background: transparent; color: var(--ds-color-primary); border: 1px solid var(--ds-color-border-strong); box-shadow: none; }
.btn-landing.btn-secondary:hover:not(:disabled, [aria-disabled=true]) {
  border-color: var(--ds-color-accent);
  background: color-mix(in srgb, var(--ds-color-accent) 12%, transparent);
  transform: translateY(-2px);
}

.btn-landing.btn-accent { background: var(--ds-color-accent); color: var(--ds-color-on-accent); }
.btn-landing.btn-accent:hover:not(:disabled, [aria-disabled=true]) {
  background: var(--ds-color-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ds-color-accent) 28%, transparent);
}

.btn-landing.btn-ghost { background: transparent; color: var(--ds-color-muted); padding: 8px 14px; }
.btn-landing.btn-ghost:hover:not(:disabled, [aria-disabled=true]) { background: transparent; color: var(--ds-color-primary); }

/* Large CTA. After the finish so it sets the padding and radius. */
.btn-lg, .btn-large {
  padding: 16px 32px;
  font-size: 16px;
  border-radius: 16px;
}

/* No lift and no fades for people who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-landing { transition: none; }
  /* Same weight as the landing hovers (4 classes/pseudo-classes), and later. */
  .btn-landing.btn-landing:hover:not(:disabled, [aria-disabled=true]) { transform: none; }
}