/* ===========================
   NAVRAS — Theme System
   Light default + Dark toggle
   =========================== */

/* DARK MODE — default */
body.light-mode {
  --gold: #B8900A;
  --gold-light: #D4A820;
  --gold-dim: #9A7820;
  --gold-bg: rgba(184,144,10,0.07);
  --gold-border: rgba(184,144,10,0.22);

  --ink: #FAF7F2;
  --ink2: #FFFFFF;
  --ink3: #EDE7DE;

  --text: #1A1410;
  --text-muted: #6B6460;
  --text-dim: #A09890;

  --green: #1A7A3C;
  --amber: #B87000;
  --red: #C0392B;

  --nav-bg: #FFFFFF;
  --card-bg: #FFFFFF;
  --card-hover: #FDF9F4;
  --shadow: 0 1px 4px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
}

/* LIGHT MODE — toggled */
:root {
  --gold: #C9A84C;
  --gold-light: #E8C96A;
  --gold-dim: #8A6F2E;
  --gold-bg: rgba(201,168,76,0.08);
  --gold-border: rgba(201,168,76,0.25);

  --ink: #12100E;
  --ink2: #1E1A16;
  --ink3: #2A2420;

  --text: #F5EDD8;
  --text-muted: #A89880;
  --text-dim: #5F5A54;

  --green: #2ECC71;
  --amber: #F39C12;
  --red: #E74C3C;

  --nav-bg: #12100E;
  --card-bg: #1E1A16;
  --card-hover: #251F1A;
  --shadow: none;
  --shadow-md: none;
}

/* Smooth transition on toggle */
body, body * {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}

/* Prevent flash of unstyled content */
body.theme-init * { transition: none !important; }

/* Theme toggle button */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 0.5px solid var(--ink3);
  background: var(--ink2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--gold-dim);
  color: var(--text);
}

.theme-toggle .toggle-icon { font-size: 14px; line-height: 1; }
.theme-toggle .toggle-label { font-size: 11px; }