/*
 * Rogue Logics — Shared Button Styles
 * Source of truth: ~/apps/shared-assets/public/shared-buttons.css
 * Served at: /shared/shared-buttons.css
 * Used by: all Rogue Logics apps
 *
 * Primary button  → solid brand teal #2EB8B8
 * Secondary button → teal-outlined, transparent bg
 */

/* ── Primary Button ──────────────────────────────────────── */
.rl-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #2eb8b8, #2563eb) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600;
  cursor: pointer;
  transition:
    box-shadow 0.2s ease,
    filter 0.2s ease;
  text-decoration: none;
}
.rl-btn-primary:hover {
  filter: brightness(1.12);
  box-shadow: 0 8px 24px rgba(46, 184, 184, 0.35);
  color: #ffffff !important;
}
.rl-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Secondary Button ────────────────────────────────────── */
.rl-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #2eb8b8;
  border: 1.5px solid #2eb8b8;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  text-decoration: none;
}
.rl-btn-secondary:hover {
  background-color: rgba(46, 184, 184, 0.1);
  color: #26a0a0;
  border-color: #26a0a0;
}
.rl-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dark mode: slightly brighter border for contrast on dark bg */
html.dark .rl-btn-secondary {
  color: #40d0d0;
  border-color: rgba(46, 184, 184, 0.65);
}
html.dark .rl-btn-secondary:hover {
  background-color: rgba(46, 184, 184, 0.12);
  color: #2eb8b8;
  border-color: #2eb8b8;
}

/* Primary button text: always white in light mode (beats html.light .text-white) */
html.light .from-cyan-500.text-white,
html.light .from-cyan-600.text-white,
html.light .bg-cyan-600.text-white,
html.light .rl-btn-primary,
html.light .from-cyan-500 .text-white,
html.light .from-cyan-600 .text-white {
  color: #ffffff !important;
}

/* ── Nav Link ─────────────────────────────────────────────── */
/* Note: .rl-nav-link styles are defined per-app in globals.css */