/* =========================================================================
   LCKD.ONE — platform UI layer.
   Loads after themes.css. Everything here is deliberately GLOBAL and scoped
   to elements / framework classes rather than app class names, because most
   views ship their own <style> block that defines .btn, .card, .input etc.
   Those local blocks load later and must keep winning — this file only fixes
   what no view should be styling itself: focus, native controls, dialogs,
   scrollbars and motion.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Typography law: never a single word alone on the last line.
   text-wrap:pretty makes the browser avoid orphans in running text;
   balance evens out short blocks (headings, leads, buttons, labels) so a
   heading never breaks with one trailing word. Both degrade to normal
   wrapping where unsupported, so there is no layout risk.
   ------------------------------------------------------------------------- */
body,
p, li, dd, figcaption,
.sub, .lead, .hint, .note, .muted {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6,
blockquote, caption, legend, label,
button, .btn, .eyebrow, .headline, .title {
  text-wrap: balance;
}

/* -------------------------------------------------------------------------
   §5 / §11  Never OS blue.
   Native controls inherit the amber accent and the current surface scheme,
   so checkboxes, radios, selects, scrollbars and carets stop rendering in
   Windows / macOS system blue.
   ------------------------------------------------------------------------- */
:root {
  color-scheme: dark;
  accent-color: var(--amber);
}

:root[data-theme="light"] {
  color-scheme: light;
}

input,
textarea,
select,
button {
  accent-color: var(--amber);
  font-family: inherit;
}

input,
textarea {
  caret-color: var(--amber);
}

::selection {
  background: var(--amber-glow);
  color: var(--text);
}

/* Focus is an amber ring, everywhere, on everything focusable. */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Native dropdowns: dark list instead of a white OS panel. */
select option,
select optgroup {
  background-color: var(--s1);
  color: var(--text);
}

/* -------------------------------------------------------------------------
   Scrollbars — calm, never bright.
   ------------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--gold-line);
  background-clip: padding-box;
}

/* -------------------------------------------------------------------------
   §7  Dialogs. Custom premium look, no default SweetAlert.
   Call sites pass background / color / confirmButtonColor as INLINE styles,
   so these need !important to win. This themes all 55 existing call sites
   at once without editing any of them.
   ------------------------------------------------------------------------- */
.swal2-container {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.swal2-backdrop-show {
  background: rgba(4, 6, 10, .62) !important;
}

.swal2-popup {
  background: linear-gradient(180deg, var(--s3), var(--s2)) !important;
  color: var(--text) !important;
  border: 1px solid var(--line2);
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-2);
  font-family: var(--font-sans) !important;
  padding: 24px !important;
}

.swal2-title {
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}

.swal2-html-container,
.swal2-content {
  color: var(--muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 13.5px !important;
}

/* Links and code inside dialogs stay mono, per §2. */
.swal2-html-container input[type="text"],
.swal2-html-container input[type="tel"] {
  font-family: var(--font-mono) !important;
  background: var(--s1) !important;
  color: var(--text) !important;
  border: 1px solid var(--line2) !important;
  border-radius: var(--r-md) !important;
}

/* Buttons: one loud amber action, everything else calm. */
.swal2-styled.swal2-confirm {
  background: linear-gradient(180deg, var(--amber-hi), var(--amber) 42%, var(--amber-lo)) !important;
  color: var(--on-accent) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 18px !important;
  box-shadow: 0 10px 26px -12px var(--amber-glow), inset 0 1px 0 rgba(255, 255, 255, .4) !important;
  transition: transform .16s ease;
}

.swal2-styled.swal2-confirm:hover {
  transform: translateY(-1px);
}

.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
  background: linear-gradient(180deg, var(--s3), var(--s2)) !important;
  color: var(--text) !important;
  border: 1px solid var(--line2) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 18px !important;
  transition: border-color .16s ease;
}

.swal2-styled.swal2-cancel:hover,
.swal2-styled.swal2-deny:hover {
  border-color: var(--gold-line) !important;
}

.swal2-styled:focus {
  box-shadow: 0 0 0 3px var(--amber-glow) !important;
}

/* Icons: amber warning circle, green check — never the default palette. */
.swal2-icon.swal2-warning {
  border-color: var(--amber) !important;
  color: var(--amber) !important;
}

.swal2-icon.swal2-success {
  border-color: var(--green) !important;
  color: var(--green) !important;
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--green) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(87, 208, 138, .35) !important;
}

.swal2-icon.swal2-error {
  border-color: var(--red) !important;
  color: var(--red) !important;
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--red) !important;
}

.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
  border-color: var(--gold-line) !important;
  color: var(--amber) !important;
}

.swal2-close {
  color: var(--muted) !important;
  border-radius: var(--r-sm) !important;
}

.swal2-close:hover {
  color: var(--text) !important;
  background: transparent !important;
}

.swal2-timer-progress-bar {
  background: var(--amber) !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select {
  background: var(--s1) !important;
  color: var(--text) !important;
  border: 1px solid var(--line2) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-mono) !important;
  box-shadow: none !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border-color: var(--gold-line) !important;
  box-shadow: 0 0 0 3px var(--amber-glow) !important;
}

.swal2-validation-message {
  background: var(--red-bg) !important;
  color: var(--red) !important;
  border-radius: var(--r-sm);
}

/* -------------------------------------------------------------------------
   Tailwind bridge.
   Several screens (profile, business, contacts, members) are built with
   Tailwind utilities that hardcode a light palette. Map the ones actually
   used onto the tokens so those screens follow the guide too.
   ------------------------------------------------------------------------- */
.bg-gray-50   { background-color: var(--bg) !important; }
.bg-gray-200  { background-color: var(--panel2) !important; }
.bg-gray-800,
.bg-gray-900  { background-color: var(--s2) !important; }

.text-gray-400 { color: var(--ink-dim) !important; }
.text-gray-600,
.text-gray-700,
.text-gray-800 { color: var(--muted) !important; }

.border-gray-300 { border-color: var(--line2) !important; }
.border-gray-100 { border-color: var(--line) !important; }

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--line) !important;
}

/* Tailwind form focus rings default to blue — override to amber. */
.focus\:border-indigo-500:focus,
.focus\:border-blue-500:focus {
  border-color: var(--gold-line) !important;
}

.focus\:ring-indigo-500:focus,
.focus\:ring-blue-500:focus {
  --tw-ring-color: var(--amber-glow) !important;
  box-shadow: 0 0 0 3px var(--amber-glow) !important;
}

/* -------------------------------------------------------------------------
   §9  Motion law. Nothing moves on its own.
   Honoured platform wide: when the visitor asks for reduced motion, every
   animation and transition stops, including the call ring and the reveal.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}