/* Vogelum · brand palette override · v15.0.1
 *
 * Black + red. Loaded LAST on every page so it wins the cascade
 * over any older purple/pink variables.
 *
 * Tokens:
 *   --bg          page background (true near-black)
 *   --surface     cards / panels
 *   --surface-2   elevated surfaces
 *   --border      hairlines, dividers
 *   --accent      primary red (CTAs, links, badges)
 *   --accent-2    deeper red (hover, pressed)
 *   --accent-3    brighter red (focus glow, badges on dark)
 *   --grad        primary gradient (red → deep red)
 *   --text        body text on dark
 *   --text-dim    secondary text
 *   --text-mute   tertiary text / captions
 *   --gold        warnings / featured highlights
 *   --pink/purple legacy aliases mapped to red so old code still works
 */
:root, html, body {
  --bg:          #0a0a0a;
  --surface:     #141414;
  --surface-2:   #1f1f1f;
  --border:      #2a2a2a;

  --accent:      #dc2626;
  --accent-2:    #991b1b;
  --accent-3:    #ef4444;
  --accent-soft: rgba(220, 38, 38, .12);
  --accent-ring: rgba(220, 38, 38, .35);

  --grad:        linear-gradient(135deg, #ef4444, #991b1b);
  --grad-pink:   linear-gradient(135deg, #ef4444, #991b1b);    /* alias */
  --grad-gold:   linear-gradient(135deg, #fbbf24, #d97706);

  --text:        #fafafa;
  --text-dim:    #d4d4d8;
  --text-mute:   #a3a3a3;
  --soft:        #71717a;

  --gold:        #f59e0b;
  --warn:        #f59e0b;
  --success:     #10b981;
  --danger:      #b91c1c;

  /* Legacy aliases that older code uses · all redirected to red palette */
  --pink:        #dc2626;
  --purple:      #b91c1c;
  --primary:     #dc2626;
  --primary-2:   #991b1b;
}

/* Force backgrounds */
html, body { background: var(--bg); color: var(--text); }

/* Buttons */
.btn-primary, button.btn-primary {
  background: var(--grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-danger {
  background: linear-gradient(135deg, #ef4444, #991b1b) !important;
}

/* Links */
a { color: #fca5a5; }
a:hover { color: #fee2e2; }

/* Logo placeholder (.brand-mark · used in login/register/landing) */
/* v15.3.0 · Si .brand-mark es <img>, NO aplicar gradient (rompe el SVG) */
.brand-mark:not(img), .logo:not(img), [class*="logo-mark"]:not(img) {
  background: var(--grad) !important;
}
img.brand-mark, img.logo {
  background: #0a0a0a;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(220,38,38,.25);
}

/* Cards / surfaces */
.card, .panel, .surface {
  background: var(--surface);
  border-color: var(--border);
}

/* Highlight ring on focus */
.input:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent-ring);
  outline-offset: 1px;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }

/* Selection */
::selection { background: var(--accent); color: #fff; }

/* Tagline / muted text */
.tagline, .muted, .text-mute { color: var(--text-mute); }

/* Pill / badge */
.badge, .pill { background: var(--accent-soft); color: var(--accent-3); border-color: var(--accent-ring); }

/* Skin small UI bits that hardcoded the old purple/pink */
[style*="ec4899"], [style*="EC4899"] { /* visual hint only · cannot rewrite inline styles */ }

/* Forced dark inputs (override auth.css that uses lighter purples) */
.input, input.input, textarea.input, select.input {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}