/* Softverno UI buttons — 2026 hierarchy
   primary solid → secondary outline → ghost → submit accent (soft gradient only) */

:root {
  --btn-ink: #0f172a;
  --btn-ink-hover: #1e293b;
  --btn-brand: #059669;
  --btn-brand-hover: #047857;
  --btn-brand-soft: #ecfdf5;
  --btn-border: #e2e8f0;
  --btn-border-hover: #6ee7b7;
  --btn-text: #334155;
  --btn-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
  --btn-shadow-brand: 0 1px 2px rgba(5, 150, 105, 0.12), 0 8px 20px rgba(16, 185, 129, 0.22);
  --btn-radius: 9999px;
  --btn-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.dark {
  --btn-ink: #f8fafc;
  --btn-ink-hover: #ffffff;
  --btn-brand: #10b981;
  --btn-brand-hover: #34d399;
  --btn-brand-soft: rgba(16, 185, 129, 0.12);
  --btn-border: #334155;
  --btn-border-hover: #34d399;
  --btn-text: #cbd5e1;
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.25);
  --btn-shadow-brand: 0 1px 2px rgba(16, 185, 129, 0.2), 0 10px 24px rgba(16, 185, 129, 0.22);
}

/* ——— Base ——— */
.btn,
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--btn-radius);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.2s var(--btn-ease),
    border-color 0.2s var(--btn-ease),
    color 0.2s var(--btn-ease),
    box-shadow 0.2s var(--btn-ease),
    transform 0.2s var(--btn-ease),
    filter 0.2s var(--btn-ease);
  -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible,
a.btn:focus-visible,
button.btn:focus-visible,
.btn-submit-gradient:focus-visible {
  outline: 2px solid #34d399;
  outline-offset: 3px;
}

.btn:active:not(:disabled),
a.btn:active,
.btn-submit-gradient:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled,
.btn-submit-gradient:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

.btn-sm { padding: 0.55rem 1.25rem; font-size: 0.875rem; }
.btn-md { padding: 0.85rem 1.75rem; font-size: 1rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ——— Primary: solid ink / brand ——— */
.btn-primary,
a.btn-primary,
button.btn-primary {
  background: var(--btn-ink) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--btn-shadow);
}

.btn-primary:hover:not(:disabled),
a.btn-primary:hover {
  background: var(--btn-ink-hover) !important;
  color: #fff !important;
  filter: brightness(1.05);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12), 0 8px 20px rgba(15, 23, 42, 0.1);
}

html.dark .btn-primary,
html.dark a.btn-primary,
html.dark button.btn-primary {
  background: var(--btn-brand) !important;
  color: #052e1c !important;
  box-shadow: var(--btn-shadow-brand);
}

html.dark .btn-primary:hover:not(:disabled),
html.dark a.btn-primary:hover {
  background: var(--btn-brand-hover) !important;
  color: #022c22 !important;
}

/* ——— Secondary: outline ——— */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
  background: transparent !important;
  color: var(--btn-text) !important;
  border-color: var(--btn-border) !important;
  box-shadow: none;
}

.btn-secondary:hover:not(:disabled),
a.btn-secondary:hover {
  background: var(--btn-brand-soft) !important;
  border-color: var(--btn-border-hover) !important;
  color: var(--btn-brand) !important;
}

/* ——— Ghost ——— */
.btn-ghost,
a.btn-ghost,
button.btn-ghost {
  background: transparent !important;
  color: var(--btn-text) !important;
  border-color: transparent !important;
  box-shadow: none;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.btn-ghost:hover:not(:disabled),
a.btn-ghost:hover {
  color: var(--btn-brand) !important;
  background: var(--btn-brand-soft) !important;
}

/* ——— Submit accent: soft mono gradient (only conversion climax) ——— */
.btn-submit-gradient {
  background-image: linear-gradient(135deg, #047857 0%, #059669 55%, #10b981 100%) !important;
  background-color: #059669 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--btn-shadow-brand);
  text-shadow: none;
  font-weight: 600;
}

.btn-submit-gradient:hover:not(:disabled) {
  background-image: linear-gradient(135deg, #065f46 0%, #047857 50%, #059669 100%) !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28), 0 12px 28px rgba(16, 185, 129, 0.2);
  filter: brightness(1.03);
  transform: translateY(-1px) scale(1);
}

.btn-submit-gradient:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
}

html.dark .btn-submit-gradient {
  background-image: linear-gradient(135deg, #059669 0%, #10b981 60%, #34d399 100%) !important;
  color: #052e1c !important;
  box-shadow: var(--btn-shadow-brand);
}

html.dark .btn-submit-gradient:hover:not(:disabled) {
  background-image: linear-gradient(135deg, #047857 0%, #10b981 55%, #6ee7b7 100%) !important;
  color: #022c22 !important;
}

/* ——— Map legacy Tailwind CTAs → system (no HTML rewrite needed for every page) ——— */
a.bg-slate-900.text-white.rounded-full,
button.bg-slate-900.text-white.rounded-full,
a.inline-block.bg-slate-900,
button.bg-slate-900:not([data-calc-discuss]):not(#contact-form-submit) {
  background: var(--btn-ink) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1.5px solid transparent !important;
  box-shadow: var(--btn-shadow);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition:
    background-color 0.2s var(--btn-ease),
    color 0.2s var(--btn-ease),
    box-shadow 0.2s var(--btn-ease),
    transform 0.2s var(--btn-ease),
    filter 0.2s var(--btn-ease);
}

a.bg-slate-900.text-white.rounded-full:hover,
button.bg-slate-900.text-white.rounded-full:hover,
a.inline-block.bg-slate-900:hover,
button.bg-slate-900:hover:not(:disabled) {
  background: var(--btn-ink-hover) !important;
  filter: brightness(1.04);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12), 0 8px 20px rgba(15, 23, 42, 0.1);
}

html.dark a.bg-slate-900.text-white.rounded-full,
html.dark button.bg-slate-900.text-white.rounded-full,
html.dark a.inline-block.bg-slate-900,
html.dark button.bg-slate-900:not(#contact-form-submit) {
  background: var(--btn-brand) !important;
  color: #052e1c !important;
  box-shadow: var(--btn-shadow-brand);
}

html.dark a.bg-slate-900.text-white.rounded-full:hover,
html.dark button.bg-slate-900.text-white.rounded-full:hover,
html.dark a.inline-block.bg-slate-900:hover,
html.dark button.bg-slate-900:hover:not(:disabled) {
  background: var(--btn-brand-hover) !important;
  color: #022c22 !important;
}

/* Hero / secondary bordered */
a.rounded-full.border-2.border-slate-200,
button.rounded-full.border.border-slate-200:not([data-calc-type]):not([data-calc-size]):not([data-calc-option]):not([data-calc-speed]) {
  background: transparent !important;
  border-width: 1.5px !important;
  border-color: var(--btn-border) !important;
  color: var(--btn-text) !important;
  font-weight: 600;
  box-shadow: none;
}

a.rounded-full.border-2.border-slate-200:hover,
button.rounded-full.border.border-slate-200:hover:not([data-calc-type]):not([data-calc-size]):not([data-calc-option]):not([data-calc-speed]) {
  background: var(--btn-brand-soft) !important;
  border-color: var(--btn-border-hover) !important;
  color: var(--btn-brand) !important;
}

/* Calculator chips */
button[data-calc-type],
button[data-calc-size],
button[data-calc-option],
button[data-calc-speed] {
  background: transparent !important;
  color: var(--btn-text) !important;
  border: 1.5px solid var(--btn-border) !important;
  font-weight: 500;
  box-shadow: none !important;
}

button[data-calc-type]:hover,
button[data-calc-size]:hover,
button[data-calc-option]:hover,
button[data-calc-speed]:hover {
  border-color: var(--btn-border-hover) !important;
  background: var(--btn-brand-soft) !important;
  color: var(--btn-brand) !important;
}

button[data-calc-type].is-selected,
button[data-calc-size].is-selected,
button[data-calc-option].is-selected,
button[data-calc-speed].is-selected,
button[data-calc-type][aria-pressed="true"],
button[data-calc-size][aria-pressed="true"],
button[data-calc-option][aria-pressed="true"],
button[data-calc-speed][aria-pressed="true"] {
  background: var(--btn-brand) !important;
  border-color: var(--btn-brand) !important;
  color: #fff !important;
  box-shadow: var(--btn-shadow-brand) !important;
}

html.dark button[data-calc-type].is-selected,
html.dark button[data-calc-size].is-selected,
html.dark button[data-calc-option].is-selected,
html.dark button[data-calc-speed].is-selected,
html.dark button[data-calc-type][aria-pressed="true"],
html.dark button[data-calc-size][aria-pressed="true"],
html.dark button[data-calc-option][aria-pressed="true"],
html.dark button[data-calc-speed][aria-pressed="true"] {
  color: #052e1c !important;
}

/* Portfolio filters */
.portfolio-filter {
  border: 1.5px solid var(--btn-border) !important;
  background: transparent !important;
  color: var(--btn-text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.portfolio-filter:hover {
  border-color: var(--btn-border-hover) !important;
  background: var(--btn-brand-soft) !important;
  color: var(--btn-brand) !important;
}

.portfolio-filter.bg-emerald-500,
.portfolio-filter[data-active="true"] {
  background: var(--btn-brand) !important;
  border-color: var(--btn-brand) !important;
  color: #fff !important;
  box-shadow: var(--btn-shadow-brand) !important;
}

html.dark .portfolio-filter.bg-emerald-500 {
  color: #052e1c !important;
}

/* Theme toggle — align with system */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1.5px solid var(--btn-border) !important;
  background: transparent;
  color: var(--btn-text) !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s var(--btn-ease), border-color 0.2s var(--btn-ease), background-color 0.2s var(--btn-ease);
}

.theme-toggle:hover {
  color: var(--btn-brand) !important;
  border-color: var(--btn-border-hover) !important;
  background: var(--btn-brand-soft) !important;
}

.theme-toggle i {
  font-size: 1.15rem;
  line-height: 1;
}

.theme-toggle .theme-icon-sun {
  display: none;
}

html.dark .theme-toggle .theme-icon-moon {
  display: none;
}

html.dark .theme-toggle .theme-icon-sun {
  display: inline-block;
}

.theme-toggle:focus-visible {
  outline: 2px solid #34d399;
  outline-offset: 3px;
}