/* ============================================
   HerPlace Global Theme — Black & Gold Luxury
   background #080808 · gold #c9a96e
   Cormorant Garamond (headings) · Jost (body)
   ============================================ */

:root {
  --bg: #080808;
  --bg-card: #111111;
  --bg-elevated: #161616;
  --gold: #c9a96e;
  --gold-bright: #dfc08a;
  --gold-dim: #8f7648;
  --text: #f0ebe3;
  --muted: #9a9284;
  --border: rgba(201, 169, 110, 0.25);
  --danger: #c0392b;
  --success: #4caf50;

  /* Legacy variable remap — pages still using the old pink vars
     pick up gold automatically once their inline :root is removed */
  --pink: #c9a96e;
  --pink-dark: #8f7648;
  --pink-light: #161616;

  /* Alias names used by individual pages — all point at canonical values above
     so no page needs its own :root block. Add aliases here, never new colors. */
  --card: #111111;
  --surface: #111111;
  --elevated: #161616;
  --gold-light: #dfc08a;
  --gold-dark: #8f7648;
  --gold-pale: rgba(201, 169, 110, 0.12);
  --gold-border: rgba(201, 169, 110, 0.25);
  --gold-glow: rgba(201, 169, 110, 0.15);
  --danger-bright: #e05a4a;
  --error: #e05a4a;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Jost', sans-serif;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--text);
  font-weight: 600;
}

a { color: var(--gold); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--gold-bright); }

/* ---------- Nav ---------- */
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--text);
}
.nav-logo span { color: var(--gold); }
.nav-logo img { height: 42px; width: auto; display: block; }

/* ---------- Cards / panels ---------- */
.card, .panel, .box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* ---------- Buttons ---------- */
button, .btn, input[type="submit"] {
  font-family: 'Jost', sans-serif;
  background: var(--gold);
  color: #080808;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
button:hover, .btn:hover, input[type="submit"]:hover {
  background: var(--gold-bright);
}
.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.btn-outline:hover { background: rgba(201, 169, 110, 0.12); }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="url"],
textarea, select {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'Jost', sans-serif;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
}
::placeholder { color: var(--muted); }

/* ---------- Tables ---------- */
table { border-collapse: collapse; }
th { color: var(--gold); font-family: 'Jost', sans-serif; }
td, th { border-bottom: 1px solid var(--border); }

/* ---------- Misc ---------- */
hr { border: none; border-top: 1px solid var(--border); }
::selection { background: var(--gold); color: #080808; }

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---- Light / pink theme. Mirrors every :root variable above.
       Add new colors to :root first, then mirror them here. ---- */
[data-theme="light"] {
  --bg: #fdf6f8;
  --bg-card: #ffffff;
  --bg-elevated: #fbeef2;
  --gold: #ec2a8c;
  --gold-bright: #f560a8;
  --gold-dim: #c11f6f;
  --text: #2a1f24;
  --muted: #8d7a81;
  --border: rgba(236, 42, 140, 0.35);
  --danger: #c0392b;
  --success: #3d9142;

  --pink: #ec2a8c;
  --pink-dark: #c11f6f;
  --pink-light: #fbeef2;

  --card: #ffffff;
  --surface: #ffffff;
  --elevated: #fbeef2;
  --gold-light: #f560a8;
  --gold-dark: #c11f6f;
  --gold-pale: rgba(236, 42, 140, 0.14);
  --gold-border: rgba(236, 42, 140, 0.35);
  --gold-glow: rgba(236, 42, 140, 0.25);
  --danger-bright: #e05a4a;
  --error: #e05a4a;
}