/* sol RENT shredder — design tokens.
   Terminal / green-ASCII aesthetic: phosphor green on near-black, monospace,
   CRT glow. The whole skin is driven from these vars + a terminal layer in
   styles.css. */

:root {
  /* Backgrounds */
  --bg-base: #04070a;
  --bg-surface: rgba(8, 18, 12, 0.62);
  --bg-button: rgba(10, 30, 18, 0.7);
  --bg-button-hover: rgba(12, 42, 24, 0.92);
  --bg-modal: rgba(3, 8, 6, 0.9);

  /* Accents — phosphor green family */
  --accent: #39FF7A;            /* primary phosphor green */
  --accent-success: #7BFFA6;    /* brighter green (success / dot-live) */
  --accent-warning: #F5D442;    /* terminal amber */
  --accent-danger: #FF5F56;     /* terminal red */
  --accent-secondary: #2EE6C2;  /* teal — keeps "Connect with Emblem" distinct */

  /* Text */
  --text: #D7FFE3;              /* soft phosphor white-green */
  --text-muted: #4F8F63;
  --text-secondary: #82CF98;

  /* Borders & rings */
  --border: rgba(57, 255, 122, 0.18);
  --border-subtle: rgba(57, 255, 122, 0.1);
  --ring: rgba(57, 255, 122, 0.28);

  /* Shape & motion */
  --radius: 3px;
  --font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Cursor-driven glow offset (set by JS on mousemove; reverse of the pointer).
     Every glow below routes through these so word + element halos shift like a
     moving light source. Default 0,0 — static until the mouse moves. */
  --gx: 0px;
  --gy: 0px;
  --shadow-glow: var(--gx) var(--gy) 22px rgba(57, 255, 122, 0.3);
}

/* ---- Accessibility: keyboard focus indicator ----
   Visible :focus-visible ring for keyboard navigation, using the Emblem
   --accent outline + --ring glow. :focus-visible keeps the ring off mouse
   clicks (no :focus-on-click noise) while keeping it for Tab/keyboard users. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
  box-shadow: 0 0 0 4px var(--ring);
}

/* Belt-and-suspenders for the interactive set the task calls out, in case a
   component-level rule sets a tighter outline. Checkboxes get extra offset so
   the ring clears the box. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.link:focus-visible,
.filter-btn:focus-visible,
.select-all:focus-visible,
.faq-q:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ring);
}

input[type="checkbox"]:focus-visible,
.acct-check:focus-visible {
  outline-offset: 3px;
}

/* Suppress the legacy non-:focus-visible outline only where :focus-visible is
   supported, so mouse clicks stay clean but keyboard focus is never lost. */
@supports selector(:focus-visible) {
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  .btn:focus:not(:focus-visible),
  input:focus:not(:focus-visible),
  select:focus:not(:focus-visible),
  textarea:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
}

/* ---- Utility classes ---- */

.surface {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.card:hover {
  border-color: var(--ring);
  box-shadow: var(--shadow-glow);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  background: var(--bg-button);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.btn:hover {
  background: var(--bg-button-hover);
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
}

.btn--success {
  border-color: rgba(20, 241, 149, 0.4);
}
.btn--success:hover {
  border-color: var(--accent-success);
  box-shadow: 0 0 20px rgba(20, 241, 149, 0.2);
}

.btn--danger {
  color: var(--accent-danger);
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.4);
}
.btn--danger:hover {
  background: rgba(248, 113, 113, 0.16);
  border-color: var(--accent-danger);
  box-shadow: 0 0 20px rgba(248, 113, 113, 0.18);
}

/* Secondary auth path — "Connect with Emblem". Distinct accent so it reads as a
   separate option next to the primary wallet connect. */
.btn--emblem {
  color: var(--accent-secondary);
  background: rgba(132, 155, 232, 0.08);
  border-color: rgba(132, 155, 232, 0.4);
}
.btn--emblem:hover {
  background: rgba(132, 155, 232, 0.16);
  border-color: var(--accent-secondary);
  box-shadow: 0 0 20px rgba(132, 155, 232, 0.18);
}