/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  XEYROSHEN — Your Own AI Model                              ║
 * ║  Codename: Rewire                                            ║
 * ║  © Adeshjeet_Official 2025 — All Rights Reserved            ║
 * ║  File: css/theming.css — Design Token & Theme System        ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ─── Light Mode (Default) ─────────────────────────────────── */
:root {
  /* Core Backgrounds */
  --bg-primary:        #ffffff;
  --bg-secondary:      #f7f7fb;
  --bg-tertiary:       #eeeef5;
  --bg-glass:          rgba(255, 255, 255, 0.72);
  --bg-overlay:        rgba(0, 0, 0, 0.45);

  /* Surface */
  --surface-1:         #ffffff;
  --surface-2:         #f4f4f9;
  --surface-3:         #ececf4;

  /* Text */
  --text-primary:      #0d0d12;
  --text-secondary:    #4a4a5c;
  --text-muted:        #8888a0;
  --text-inverse:      #ffffff;
  --text-placeholder:  #b0b0c4;

  /* Brand / Accent — Xeyroshen Signature Violet */
  --accent:            #6c5ce7;
  --accent-light:      #a29bfe;
  --accent-dim:        rgba(108, 92, 231, 0.12);
  --accent-glow:       rgba(108, 92, 231, 0.25);
  --accent-hover:      #5a4dd6;

  /* Status */
  --success:           #00b894;
  --success-dim:       rgba(0, 184, 148, 0.12);
  --warning:           #fdcb6e;
  --warning-dim:       rgba(253, 203, 110, 0.15);
  --danger:            #e17055;
  --danger-dim:        rgba(225, 112, 85, 0.12);
  --info:              #0984e3;
  --info-dim:          rgba(9, 132, 227, 0.12);

  /* Borders */
  --border:            rgba(0, 0, 0, 0.08);
  --border-strong:     rgba(0, 0, 0, 0.16);
  --border-accent:     rgba(108, 92, 231, 0.35);

  /* Shadows */
  --shadow-sm:         0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:         0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:         0 8px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-accent:     0 4px 20px rgba(108, 92, 231, 0.25);

  /* Chat bubbles */
  --bubble-ai:         #f0effe;
  --bubble-ai-border:  rgba(108, 92, 231, 0.12);
  --bubble-user:       #6c5ce7;
  --bubble-user-text:  #ffffff;

  /* Code */
  --code-bg:           #f3f2fc;
  --code-text:         #5a4dd6;
  --code-border:       rgba(108, 92, 231, 0.15);

  /* Scrollbar */
  --scroll-thumb:      rgba(108, 92, 231, 0.25);
  --scroll-track:      transparent;

  /* Layout */
  --radius-sm:         6px;
  --radius-md:         10px;
  --radius-lg:         16px;
  --radius-xl:         24px;
  --radius-pill:       999px;

  /* Typography */
  --font-display:      'Syne', 'Space Grotesk', system-ui, sans-serif;
  --font-body:         'DM Sans', 'Inter', system-ui, sans-serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Transitions */
  --transition-fast:   0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* AI Identity — dynamically overridden by settings */
  --ai-color:          #6c5ce7;
  --ai-color-light:    rgba(108, 92, 231, 0.12);

  /* Sidebar */
  --sidebar-width:     260px;
  --nav-height:        60px;

  /* Theme name for JS reading */
  --theme-name: "light";
}

/* ─── Dark Mode ─────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Core Backgrounds */
  --bg-primary:        #0e0e16;
  --bg-secondary:      #13131e;
  --bg-tertiary:       #1a1a28;
  --bg-glass:          rgba(14, 14, 22, 0.82);
  --bg-overlay:        rgba(0, 0, 0, 0.65);

  /* Surface */
  --surface-1:         #16161f;
  --surface-2:         #1e1e2e;
  --surface-3:         #26263a;

  /* Text */
  --text-primary:      #e8e8f4;
  --text-secondary:    #9090b0;
  --text-muted:        #5a5a78;
  --text-inverse:      #0d0d12;
  --text-placeholder:  #3e3e58;

  /* Brand / Accent */
  --accent:            #7c6fff;
  --accent-light:      #a29bfe;
  --accent-dim:        rgba(124, 111, 255, 0.15);
  --accent-glow:       rgba(124, 111, 255, 0.3);
  --accent-hover:      #9180ff;

  /* Status */
  --success:           #00cba8;
  --success-dim:       rgba(0, 203, 168, 0.12);
  --warning:           #ffeaa7;
  --warning-dim:       rgba(255, 234, 167, 0.12);
  --danger:            #ff7675;
  --danger-dim:        rgba(255, 118, 117, 0.12);
  --info:              #74b9ff;
  --info-dim:          rgba(116, 185, 255, 0.12);

  /* Borders */
  --border:            rgba(255, 255, 255, 0.07);
  --border-strong:     rgba(255, 255, 255, 0.14);
  --border-accent:     rgba(124, 111, 255, 0.35);

  /* Shadows */
  --shadow-sm:         0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:         0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg:         0 8px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-accent:     0 4px 24px rgba(124, 111, 255, 0.35);

  /* Chat bubbles */
  --bubble-ai:         #1e1e2e;
  --bubble-ai-border:  rgba(124, 111, 255, 0.15);
  --bubble-user:       #7c6fff;
  --bubble-user-text:  #ffffff;

  /* Code */
  --code-bg:           #12121c;
  --code-text:         #a29bfe;
  --code-border:       rgba(124, 111, 255, 0.2);

  /* Scrollbar */
  --scroll-thumb:      rgba(124, 111, 255, 0.25);

  --theme-name: "dark";
}

/* ─── System-Preference Auto Dark ──────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary:        #0e0e16;
    --bg-secondary:      #13131e;
    --bg-tertiary:       #1a1a28;
    --bg-glass:          rgba(14, 14, 22, 0.82);
    --bg-overlay:        rgba(0, 0, 0, 0.65);
    --surface-1:         #16161f;
    --surface-2:         #1e1e2e;
    --surface-3:         #26263a;
    --text-primary:      #e8e8f4;
    --text-secondary:    #9090b0;
    --text-muted:        #5a5a78;
    --text-inverse:      #0d0d12;
    --text-placeholder:  #3e3e58;
    --accent:            #7c6fff;
    --accent-light:      #a29bfe;
    --accent-dim:        rgba(124, 111, 255, 0.15);
    --accent-glow:       rgba(124, 111, 255, 0.3);
    --accent-hover:      #9180ff;
    --success:           #00cba8;
    --success-dim:       rgba(0, 203, 168, 0.12);
    --warning:           #ffeaa7;
    --warning-dim:       rgba(255, 234, 167, 0.12);
    --danger:            #ff7675;
    --danger-dim:        rgba(255, 118, 117, 0.12);
    --info:              #74b9ff;
    --info-dim:          rgba(116, 185, 255, 0.12);
    --border:            rgba(255, 255, 255, 0.07);
    --border-strong:     rgba(255, 255, 255, 0.14);
    --border-accent:     rgba(124, 111, 255, 0.35);
    --shadow-sm:         0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md:         0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.25);
    --shadow-lg:         0 8px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
    --shadow-accent:     0 4px 24px rgba(124, 111, 255, 0.35);
    --bubble-ai:         #1e1e2e;
    --bubble-ai-border:  rgba(124, 111, 255, 0.15);
    --bubble-user:       #7c6fff;
    --bubble-user-text:  #ffffff;
    --code-bg:           #12121c;
    --code-text:         #a29bfe;
    --code-border:       rgba(124, 111, 255, 0.2);
    --scroll-thumb:      rgba(124, 111, 255, 0.25);
    --theme-name: "dark";
  }
}

/* ─── Smooth Theme Transitions ──────────────────────────────── */
*, *::before, *::after {
  transition:
    background-color var(--transition-base),
    border-color     var(--transition-base),
    color            var(--transition-fast),
    box-shadow       var(--transition-base);
}

/* Prevent transitions on page load */
.no-transition,
.no-transition * {
  transition: none !important;
}