/* ═══════════════════════════════════════════════════════════
   MONARCH THEME SYSTEM
   Import this file in each app's main CSS
   Apply data-theme="dark" or data-theme="light" to <html>
═══════════════════════════════════════════════════════════ */

/* ── Dark Theme (default) ─────────────────────────────── */
[data-theme="dark"], :root {
  --bg:              #0D1117;
  --bg-secondary:    #0B0F14;
  --surface:         #161B22;
  --surface-raised:  #1C2333;
  --panel:           #1A2232;
  --border:          #1E2A3A;
  --border-light:    #253040;

  --text-primary:    #F8F6F1;
  --text-secondary:  #8B9CB6;
  --text-muted:      #4A5A6A;
  --text-inverse:    #111111;

  --accent-gold:     #C9A227;
  --accent-gold-dim: rgba(201,162,39,0.15);
  --accent-red:      #E63946;
  --accent-red-dim:  rgba(230,57,70,0.12);
  --accent-green:    #06D6A0;
  --accent-blue:     #00B4D8;
  --accent-purple:   #7B2FBE;

  --input-bg:        #1A2232;
  --input-border:    #253040;
  --input-focus:     #C9A227;

  --shadow-sm:       0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:       0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:       0 8px 40px rgba(0,0,0,0.5);

  --scrollbar-thumb: #253040;
  --scrollbar-track: #0D1117;

  --nav-bg:          #0B0F14;
  --nav-border:      #1E2A3A;

  --toggle-bg:       #253040;
  --toggle-icon:     #C9A227;
}

/* ── Light Theme ──────────────────────────────────────── */
[data-theme="light"] {
  --bg:              #F8F6F1;
  --bg-secondary:    #F0EDE6;
  --surface:         #FFFFFF;
  --surface-raised:  #FFFFFF;
  --panel:           #F4F1EC;
  --border:          #E2DDD6;
  --border-light:    #EAE6E0;

  --text-primary:    #111111;
  --text-secondary:  #555555;
  --text-muted:      #999999;
  --text-inverse:    #F8F6F1;

  --accent-gold:     #B8911F;
  --accent-gold-dim: rgba(184,145,31,0.12);
  --accent-red:      #D32F3F;
  --accent-red-dim:  rgba(211,47,63,0.10);
  --accent-green:    #05A07A;
  --accent-blue:     #0090B0;
  --accent-purple:   #6A1FA8;

  --input-bg:        #FFFFFF;
  --input-border:    #D0CBC3;
  --input-focus:     #B8911F;

  --shadow-sm:       0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:       0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:       0 8px 40px rgba(0,0,0,0.16);

  --scrollbar-thumb: #D0CBC3;
  --scrollbar-track: #F0EDE6;

  --nav-bg:          #FFFFFF;
  --nav-border:      #E2DDD6;

  --toggle-bg:       #E2DDD6;
  --toggle-icon:     #B8911F;
}

/* ── Global resets using variables ───────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* Theme transition — smooth but not slow */
*, *::before, *::after {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}
/* Don't transition transforms or opacity (breaks animations) */
button, a { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }