/* ============================================================
   C&G LOOKUP — Design System v3.0
   Single source of truth for all design tokens
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === GOOFY (default) === */
:root {
  color-scheme: dark;

  /* Backgrounds */
  --bg-primary: #0b1120;
  --bg-secondary: #0b1120;
  --bg-elevated: #141c2c;
  --bg-card: #121a2c;
  --bg-hover: #19223a;
  --bg-input: #0b1120;
  --bg-sidebar: #0b1120;
  --bg-results: #070d1a;

  /* Accent — blue */
  --color-accent: #3b82f6;
  --color-accent-rgb: 59, 130, 246;
  --color-accent-hover: #60a5fa;
  --color-accent-glow: rgba(59, 130, 246, 0.10);
  --color-accent-soft: rgba(59, 130, 246, 0.05);

  /* Status */
  --color-success: #22c55e;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* Text */
  --text-primary: #e2e8f0;
  --text-secondary: rgba(226, 232, 240, 0.55);
  --text-tertiary: rgba(226, 232, 240, 0.30);
  --text-muted: rgba(226, 232, 240, 0.16);

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(59, 130, 246, 0.20);
  --border-accent: rgba(59, 130, 246, 0.28);
  --border-subtle: rgba(255, 255, 255, 0.03);

  /* Typography */
  /* Default UI font: Windows-like (matches your screenshot) */
  --font-ui: 'Segoe UI', Tahoma, Verdana, Arial, system-ui, sans-serif;
  /* Default monospace: Windows Consolas */
  --font-mono: 'Consolas', 'Courier New', ui-monospace, monospace;
  --font-heading: var(--font-ui);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* Motion */
  --transition-fast: 120ms ease;
  --transition-normal: 180ms ease;

  /* Layout */
  --sidebar-w: 220px;
  --z-sidebar: 200;
  --z-modal: 400;
  --z-auth: 500;
  --z-toast: 600;

  /* Aliases */
  --primary-color: var(--color-accent);
  --primary-rgb: var(--color-accent-rgb);
  --card-bg: var(--bg-card);
  --dark-bg: var(--bg-primary);
  --border-default: var(--border-color);
  --grid-color: transparent;
  --bg-tertiary: var(--bg-elevated);
}

/* === BASE BODY === */
html {
  background: #0b1120;
  min-height: 100vh;
}

body {
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

html, body { width: 100%; }
::selection { background: rgba(59, 130, 246, 0.25); color: #fff; }
* { font-variant-emoji: text; }
.emoji-sym { font-style: normal; display: inline; }

/* Kill all decorative elements */
.site-grid-bg, .site-grid-glow, .bg-gradient, .scanline,
body::before, body::after,
.custom-cursor, .custom-cursor-ring, .cursor-glow,
.auth-page-bg, .auth-bg-gradient, .auth-bg-gradient-2, .auth-bg-grid,
.site-header { display: none !important; }

/* === AUTH VISIBILITY === */
.auth-page { display: none; }
body:not(.authenticated) .auth-page { display: flex !important; }
body.authenticated .auth-page { display: none !important; }
body:not(.authenticated) .main-site { display: none !important; }
body.authenticated .main-site { display: block !important; }
.main-site { position: relative; z-index: auto; pointer-events: auto; min-height: 100vh; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.14); }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.08) transparent; }

/* Hide global scrollbar on body */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

/* === RESPONSIVE === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
[hidden] { display: none !important; }


/* ============================================================
   THEME CHILL — Sharp indigo, terminal feel
   ============================================================ */
html.theme-chill, body.theme-chill {
  --bg-primary: #07071a;
  --bg-secondary: #0a0a22;
  --bg-elevated: #10102a;
  --bg-card: #0c0c24;
  --bg-hover: #141438;
  --bg-input: #08081e;
  --bg-sidebar: #07071a;

  --color-accent: #6366f1;
  --color-accent-rgb: 99, 102, 241;
  --color-accent-hover: #818cf8;
  --color-accent-glow: rgba(99, 102, 241, 0.10);
  --color-accent-soft: rgba(99, 102, 241, 0.05);

  --text-primary: #ddddf0;
  --text-secondary: rgba(221, 221, 240, 0.45);
  --text-tertiary: rgba(221, 221, 240, 0.25);
  --text-muted: rgba(221, 221, 240, 0.15);

  --border-color: rgba(99, 102, 241, 0.07);
  --border-hover: rgba(99, 102, 241, 0.16);

  --color-success: #34d399;
  --color-error: #f87171;

  --font-ui: 'Segoe UI', Tahoma, Verdana, Arial, system-ui, sans-serif;
  --font-heading: 'Segoe UI', Tahoma, Verdana, Arial, system-ui, sans-serif;

  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
}

html.theme-chill, html.theme-chill body { background: #07071a; }
body.theme-chill::selection { background: rgba(99, 102, 241, 0.25); color: #fff; }

/* Chill — force Windows-like UI on ALL elements */
body.theme-chill,
body.theme-chill * { font-family: var(--font-ui); }
body.theme-chill { font-size: 15.5px; font-weight: 500; }
body.theme-chill .search-hero-title { font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; }
body.theme-chill .sb-brand-name { letter-spacing: 0.08em; font-weight: 700; font-size: 1.1rem; }
body.theme-chill .sb-nav-item { font-size: 0.95rem; font-weight: 600; }
body.theme-chill .card-value { font-size: 0.92rem; font-weight: 500; }
body.theme-chill .btn-search { font-weight: 700; font-size: 0.9rem; letter-spacing: 0.03em; }
body.theme-chill h1, body.theme-chill h2, body.theme-chill h3 { font-weight: 700; }
body.theme-chill .card-label { font-family: var(--font-mono); color: rgba(99, 102, 241, 0.45); }
body.theme-chill .card,
body.theme-chill .result-card { border-left: 2px solid rgba(99, 102, 241, 0.10); }
body.theme-chill .card:hover,
body.theme-chill .result-card:hover { border-left-color: rgba(99, 102, 241, 0.30); }


/* ============================================================
   THEME MONO — Pure black & white, brutalist, zero color
   ============================================================ */
html.theme-mono, body.theme-mono {
  --bg-primary: #000000;
  --bg-secondary: #000000;
  --bg-elevated: #0a0a0a;
  --bg-card: #060606;
  --bg-hover: #0e0e0e;
  --bg-input: #030303;
  --bg-sidebar: #000000;
  --bg-results: #000000;

  --color-accent: #ffffff;
  --color-accent-rgb: 255, 255, 255;
  --color-accent-hover: #b0b0b0;
  --color-accent-glow: rgba(255, 255, 255, 0.06);
  --color-accent-soft: rgba(255, 255, 255, 0.02);

  --color-success: #999;
  --color-error: #777;
  --color-warning: #888;
  --color-info: #fff;

  --text-primary: #d4d4d4;
  --text-secondary: rgba(200, 200, 200, 0.50);
  --text-tertiary: rgba(200, 200, 200, 0.22);
  --text-muted: rgba(200, 200, 200, 0.10);

  --border-color: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(255, 255, 255, 0.22);
  --border-subtle: rgba(255, 255, 255, 0.03);

  --font-ui: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --font-heading: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-full: 9999px;
}

html.theme-mono, html.theme-mono body { background: #000000; }
body.theme-mono::selection { background: rgba(255, 255, 255, 0.25); color: #000; }

/* Mono — typography: monospace everywhere via variable + body override */
body.theme-mono,
body.theme-mono * { font-family: var(--font-ui); }

/* Mono — search button: white on black, softened */
body.theme-mono .btn-search { background: #fff; color: #000; border-radius: 8px; box-shadow: none; }
body.theme-mono .btn-search:hover { background: #d0d0d0; color: #000; box-shadow: 0 0 10px rgba(255,255,255,0.10); }

/* Mono — cards: softened corners, thin white border */
body.theme-mono .card,
body.theme-mono .result-card { border-radius: 12px; border-color: rgba(255,255,255,0.08); }
body.theme-mono .card:hover,
body.theme-mono .result-card:hover { border-color: rgba(255,255,255,0.18); box-shadow: 0 4px 20px rgba(0,0,0,0.6); }
body.theme-mono .card-header { border-bottom-color: rgba(255,255,255,0.05); }
body.theme-mono .card-badge { background: rgba(255,255,255,0.05); color: #999; border-radius: 6px; }
body.theme-mono .card-label { color: rgba(255,255,255,0.28); text-transform: uppercase; letter-spacing: 0.08em; }

/* Mono — sidebar: minimal with soft edges */
body.theme-mono .sb-brand-name { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; }
body.theme-mono #sbPanel .sb-nav-item { border-radius: 8px; font-size: 0.8rem; letter-spacing: 0.03em; }
body.theme-mono #sbPanel .sb-nav-item.active { background: rgba(255,255,255,0.08); }
body.theme-mono .sb-bottom-card { border-radius: 10px; }
body.theme-mono .sb-section-title { letter-spacing: 0.12em; }

/* Mono — search bar: rounded */
body.theme-mono .search-input-row { border-radius: 12px; }
body.theme-mono .search-input-row::before { border-radius: 13px; }
body.theme-mono .search-input-row::after { border-radius: 11px; }
body.theme-mono .btn-search { border-radius: 8px; }

/* Mono — buttons & widgets: softened */
body.theme-mono .sb-pw-action-btn { border-radius: 8px; }
body.theme-mono .btn-copy-all { border-radius: 8px; }
body.theme-mono .quick-action-card { border-radius: 12px; }
body.theme-mono .sb-profile-widget { border-radius: 12px; }

/* Mono — scrollbar */
body.theme-mono ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 6px; }


/* ============================================================
   THEME CG — Deep black + vivid purple (C&G brand)
   ============================================================ */
html.theme-cg, body.theme-cg {
  --bg-primary: #050508;
  --bg-secondary: #07070d;
  --bg-elevated: #0c0c16;
  --bg-card: #0a0a12;
  --bg-hover: #111120;
  --bg-input: #06060c;
  --bg-sidebar: #050508;
  --bg-results: #030306;

  --color-accent: #8b5cf6;
  --color-accent-rgb: 139, 92, 246;
  --color-accent-hover: #a78bfa;
  --color-accent-glow: rgba(139, 92, 246, 0.10);
  --color-accent-soft: rgba(139, 92, 246, 0.04);

  --color-success: #34d399;
  --color-error: #f87171;
  --color-warning: #fbbf24;
  --color-info: #a78bfa;

  --text-primary: #ece8f4;
  --text-secondary: rgba(236, 232, 244, 0.48);
  --text-tertiary: rgba(236, 232, 244, 0.22);
  --text-muted: rgba(236, 232, 244, 0.10);

  --border-color: rgba(139, 92, 246, 0.06);
  --border-hover: rgba(139, 92, 246, 0.18);
  --border-accent: rgba(139, 92, 246, 0.28);
  --border-subtle: rgba(139, 92, 246, 0.03);

  --font-ui: 'Segoe UI', Tahoma, Verdana, Arial, system-ui, sans-serif;
  --font-heading: 'Segoe UI', Tahoma, Verdana, Arial, system-ui, sans-serif;
}

html.theme-cg, html.theme-cg body { background: #050508; }
body.theme-cg::selection { background: rgba(139, 92, 246, 0.30); color: #fff; }

/* CG — force Windows-like UI on ALL elements */
body.theme-cg,
body.theme-cg * { font-family: var(--font-ui); }
body.theme-cg { font-size: 14.5px; }
body.theme-cg .sb-brand-name {
  font-family: var(--font-ui);
  letter-spacing: 0.10em;
  font-weight: 700;
  text-shadow: 0 0 16px rgba(139, 92, 246, 0.25);
}
body.theme-cg .page-title,
body.theme-cg .settings-card-title,
body.theme-cg .section-header,
body.theme-cg .card-header-title { font-family: var(--font-heading); font-weight: 600; }
body.theme-cg .btn-search { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.02em; }
body.theme-cg h1, body.theme-cg h2, body.theme-cg h3 { font-family: var(--font-heading); }

/* CG — cards: purple left accent + top glow line */
body.theme-cg .card,
body.theme-cg .result-card {
  border-left: 2px solid rgba(139, 92, 246, 0.12);
  border-top: 1px solid rgba(139, 92, 246, 0.08);
}
body.theme-cg .card:hover,
body.theme-cg .result-card:hover {
  border-left-color: rgba(139, 92, 246, 0.40);
  border-top-color: rgba(139, 92, 246, 0.18);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 24px -6px rgba(139, 92, 246, 0.12);
}
body.theme-cg .card-label { font-family: var(--font-mono); color: rgba(139, 92, 246, 0.38); }
body.theme-cg .card-badge { background: rgba(139, 92, 246, 0.08); color: #a78bfa; }
body.theme-cg .card-header { border-bottom-color: rgba(139, 92, 246, 0.05); }

/* CG — sidebar: purple tint */
body.theme-cg #sbPanel { border-right-color: rgba(139, 92, 246, 0.06); }
body.theme-cg #sbPanel .sb-nav-item.active {
  background: rgba(139, 92, 246, 0.10);
  box-shadow: inset 3px 0 0 rgba(139, 92, 246, 0.50);
}
body.theme-cg #sbPanel .sb-nav-item:hover { background: rgba(139, 92, 246, 0.04); }
body.theme-cg .sb-bottom-card { border-color: rgba(139, 92, 246, 0.06); }
body.theme-cg .sb-section-title { color: rgba(139, 92, 246, 0.30); }

/* CG — search bar: stronger purple glow */
body.theme-cg .search-input-row::before { opacity: 0.7; }
body.theme-cg .search-input-row:focus-within::before { opacity: 1; }
body.theme-cg .search-input { caret-color: #a78bfa; }

/* CG — search button: purple gradient */
body.theme-cg .btn-search {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.25);
}
body.theme-cg .btn-search:hover {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.35);
}

/* CG — export/action buttons: purple tint */
body.theme-cg .sb-pw-action-btn {
  background: linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(139,92,246,0.16) 100%);
  border-color: rgba(139, 92, 246, 0.18);
  color: #a78bfa;
}
body.theme-cg .sb-pw-action-btn:hover {
  background: linear-gradient(135deg, rgba(139,92,246,0.14) 0%, rgba(139,92,246,0.28) 100%);
  border-color: rgba(139, 92, 246, 0.35);
  color: #fff;
}

/* CG — quick actions */
body.theme-cg .quick-action-card { border-color: rgba(139, 92, 246, 0.06); }
body.theme-cg .quick-action-card:hover { border-color: rgba(139, 92, 246, 0.18); }
body.theme-cg .qa-icon { background: rgba(139, 92, 246, 0.08); color: #a78bfa; }

/* CG — live widget dot */
body.theme-cg .sb-live-dot { background: #a78bfa; box-shadow: 0 0 4px rgba(139,92,246,0.5), 0 0 10px rgba(139,92,246,0.2); }

/* CG — scrollbar purple */
body.theme-cg ::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.15); }
body.theme-cg ::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.30); }

/* CG — stats widget */
body.theme-cg .sb-stats-val {
  background: linear-gradient(135deg, #ece8f4 40%, #a78bfa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}