/* ============================================================
   YOURIQAI — PUBLIC BRAND THEME SYSTEM
   LIGHT MODE  = WHITE BASE (#FFFFFF) — default, public-facing
   DARK MODE   = BLACK BASE (#000000) — user-selectable
   GOLD / SILVER / PINK — locked, never change
   No page may define its own colors outside this file.
   ============================================================ */

:root {
  /* === LOCKED BRAND COLORS — same in every mode === */
  --gold:   #D4AF37;
  --silver: #C0C0C0;
  --pink:   #D98FB3;

  /* === STATUS COLORS — fixed === */
  --green:  #2ecc71;
  --red:    #e74c3c;
  --blue:   #3b82f6;
  --yellow: #D4AF37;

  /* === RGB CHANNELS for rgba() usage === */
  --bg-rgb:     255, 255, 255;
  --text-rgb:   17, 17, 17;
  --gold-rgb:   212, 175, 55;
  --pink-rgb:   217, 143, 179;
  --silver-rgb: 192, 192, 192;
  --green-rgb:  46, 204, 113;
  --red-rgb:    231, 76, 60;
  --blue-rgb:   59, 130, 246;

  /* === LIGHT MODE — default === */
  --bg:       #FFFFFF;
  --surface:  #F8F8F6;
  --surface2: #F0EFED;
  --border:   #C0C0C0;
  --text:     #111111;
  --muted:    #666666;

  /* === ALIASES — keep existing codebase working === */
  --accent:  var(--gold);
  --accent2: var(--pink);
  --code:    var(--silver);
}

/* === DARK MODE — user-selectable === */
[data-theme="dark"] {
  --bg-rgb:   0, 0, 0;
  --text-rgb: 255, 255, 255;

  --bg:       #000000;
  --surface:  #0a0a0a;
  --surface2: #111111;
  --border:   #222222;
  --text:     #FFFFFF;
  --muted:    #888888;
}

/* === THEME TOGGLE WIDGET === */
.theme-switcher {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.theme-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: all 0.12s;
}
.theme-btn:hover { color: var(--text); border-color: var(--border); }
.theme-btn.active { background: var(--surface2); color: var(--gold); border-color: var(--gold); }

/* Prevent flash on load — JS sets data-theme before paint */
html:not([data-theme]) { visibility: hidden; }
html[data-theme] { visibility: visible; }