/* REDEYE brand tokens. Black and greys carry the UI; signal red is for the mark, primary actions and alerts. */
:root {
  --re-bg: #0a0a0b;
  --re-surface: #131316;
  --re-surface-2: #1b1b20;
  --re-border: #2a2a31;
  --re-text: #d4d4d8;
  --re-muted: #8b8b94;
  --re-red: #e5112b;
  --re-red-glow: #ff3b4f;
  --re-red-deep: #7a0614;
  --re-ok: #3ccf7a;
  --re-warn: #f2b33d;
  --re-radius: 10px;
  --re-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --re-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body.re { margin: 0; background: var(--re-bg); color: var(--re-text); font: 15px/1.5 var(--re-font); }
.re-logo { display: block; height: 40px; width: auto; }
.re-logo--lg { height: 64px; }
.re-mark { width: 28px; height: 28px; }

.re-card { background: var(--re-surface); border: 1px solid var(--re-border); border-radius: var(--re-radius); padding: 20px; }
.re-muted { color: var(--re-muted); }
.re-mono { font-family: var(--re-mono); }

.re-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--re-border);
  background: var(--re-surface-2); color: var(--re-text); font: 600 14px var(--re-font); cursor: pointer; }
.re-btn:hover { border-color: var(--re-muted); }
.re-btn--primary { background: var(--re-red); border-color: var(--re-red); color: #fff; }
.re-btn--primary:hover { background: var(--re-red-glow); box-shadow: 0 0 18px rgba(255, 59, 79, .35); }
.re-btn:focus-visible { outline: 2px solid var(--re-red-glow); outline-offset: 2px; }

.re-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 11px/18px var(--re-font); letter-spacing: .04em;
  text-transform: uppercase; border: 1px solid var(--re-border); color: var(--re-muted); }
.re-badge--free { color: var(--re-ok); border-color: rgba(60, 207, 122, .4); }
.re-badge--paid { color: var(--re-warn); border-color: rgba(242, 179, 61, .4); }
.re-badge--alert { color: var(--re-red-glow); border-color: rgba(229, 17, 43, .5); }

.re-beam { height: 2px; border: 0; background: linear-gradient(90deg, var(--re-red-glow), rgba(229, 17, 43, .55) 60%, transparent); }