/* ============================================================
   YOURIQAI — LOCKED THEME SYSTEM
   Generated: 2026-04-19
   DARK MODE  = BLACK BASE (#000000)
   LIGHT MODE = WHITE BASE (#FFFFFF)
   GOLD / SILVER / PINK — NEVER CHANGE
   No page may define its own colors.
   All colors come from these variables only.
   ============================================================ */

:root {
  /* === LOCKED BRAND COLORS — constant in both modes === */
  --gold:   #D4AF37;
  --silver: #C0C0C0;
  --pink:   #FF2D8D;

  /* === STATUS COLORS — fixed, not mode-dependent === */
  --green:  #2ecc71;
  --red:    #e74c3c;
  --blue:   #3b82f6;
  --yellow: #D4AF37; /* gold serves as warm highlight */

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

  /* === DARK MODE (default) === */
  --bg:       #000000;
  --surface:  #0a0a0a;
  --surface2: #111111;
  --border:   #222222;
  --text:     #FFFFFF;
  --muted:    #888888;

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

/* === LIGHT MODE === */
[data-theme="light"] {
  --bg-rgb:   255, 255, 255;
  --text-rgb: 0, 0, 0;

  --bg:       #FFFFFF;
  --surface:  #F5F5F5;
  --surface2: #EBEBEB;
  --border:   #DDDDDD;
  --text:     #000000;
  --muted:    #666666;
}

/* === 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(var(--bg-rgb), 0.4);
}
.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 */
html:not([data-theme]) { visibility: hidden; }
html[data-theme] { visibility: visible; }