/* =========================================================
   A Capital — Theme System (Light + Dark)
   Unified design tokens. Toggle via [data-theme] on <html>.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* Make Inter the default everywhere; defeats inline `Arial !important`
   when this stylesheet (or menu-theme.css) is loaded after the inline
   <style> in each page. */
html,
body,
button,
input,
select,
textarea,
*,
*::before,
*::after{
  font-family: "Inter", "Helvetica Neue", Arial, Helvetica, sans-serif !important;
  -webkit-font-feature-settings: "cv11", "ss01", "ss03";
          font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ================== DARK (default) ================== */
:root,
:root[data-theme="dark"]{
  /* Surfaces */
  --bg:            #0a0e1a;
  --bg-soft:       #0d1322;
  --surface:       #11172a;
  --surface-2:     #161d34;
  --surface-3:     #1c2440;
  --surface-hover: #1a2238;

  /* Text */
  --text:          #f1f5f9;
  --text-2:        #cbd5e1;
  --muted:         #94a3b8;
  --muted-2:       #64748b;

  /* Borders & rings */
  --line:          rgba(148,163,184,.10);
  --line-strong:   rgba(148,163,184,.18);
  --ring:          rgba(212,160,23,.30);

  /* Civic gold (refined) */
  --gold:          #e6b934;
  --gold-2:        #f0c95a;
  --gold-soft:     rgba(230,185,52,.10);
  --gold-soft-2:   rgba(230,185,52,.16);
  --gold-glow:     rgba(230,185,52,.22);

  /* Accent (calm indigo for non-gold callouts) */
  --indigo:        #818cf8;
  --indigo-soft:   rgba(129,140,248,.12);

  /* Semantic */
  --success:       #34d399;
  --success-soft:  rgba(52,211,153,.12);
  --danger:        #f87171;
  --danger-soft:   rgba(248,113,113,.12);
  --warning:       #fbbf24;
  --warning-soft:  rgba(251,191,36,.12);
  --info:          #60a5fa;
  --info-soft:     rgba(96,165,250,.12);

  /* Inputs */
  --input-bg:      #0e1528;
  --input-bg-2:    #131b32;
  --input-line:    rgba(148,163,184,.16);

  /* Shadows */
  --shadow-sm:     0 1px 2px rgba(0,0,0,.30);
  --shadow:        0 10px 24px rgba(0,0,0,.30);
  --shadow-lg:     0 20px 48px rgba(0,0,0,.40);
  --shadow-glow:   0 0 0 1px rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.28);

  /* Radius */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 24px;
  --r-pill:999px;

  /* Misc */
  --backdrop:      rgba(2,6,23,.60);
  --scheme:        dark;
  color-scheme:    dark;
}

/* ================== LIGHT ================== */
:root[data-theme="light"]{
  --bg:            #f6f7fb;
  --bg-soft:       #eef1f8;
  --surface:       #ffffff;
  --surface-2:     #f4f6fb;
  --surface-3:     #eaedf5;
  --surface-hover: #f1f4fa;

  --text:          #0f172a;
  --text-2:        #334155;
  --muted:         #64748b;
  --muted-2:       #94a3b8;

  --line:          rgba(15,23,42,.08);
  --line-strong:   rgba(15,23,42,.14);
  --ring:          rgba(180,135,15,.35);

  --gold:          #b8860b;
  --gold-2:        #d4a017;
  --gold-soft:     rgba(184,134,11,.10);
  --gold-soft-2:   rgba(184,134,11,.16);
  --gold-glow:     rgba(184,134,11,.22);

  --indigo:        #4f46e5;
  --indigo-soft:   rgba(79,70,229,.10);

  --success:       #16a34a;
  --success-soft:  rgba(22,163,74,.12);
  --danger:        #dc2626;
  --danger-soft:   rgba(220,38,38,.10);
  --warning:       #d97706;
  --warning-soft:  rgba(217,119,6,.12);
  --info:          #2563eb;
  --info-soft:     rgba(37,99,235,.10);

  --input-bg:      #ffffff;
  --input-bg-2:    #f7f9fd;
  --input-line:    rgba(15,23,42,.12);

  --shadow-sm:     0 1px 2px rgba(15,23,42,.06);
  --shadow:        0 10px 24px rgba(15,23,42,.08);
  --shadow-lg:     0 20px 48px rgba(15,23,42,.12);
  --shadow-glow:   0 0 0 1px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.06);

  --backdrop:      rgba(15,23,42,.32);
  --scheme:        light;
  color-scheme:    light;
}

/* ================== Smooth theme transition ================== */
html.theme-ready *,
html.theme-ready *::before,
html.theme-ready *::after{
  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    fill .25s ease,
    stroke .25s ease;
}
html.theme-ready img,
html.theme-ready video,
html.theme-ready canvas,
html.theme-ready svg{ transition:none; }
@media (prefers-reduced-motion: reduce){
  html.theme-ready *,
  html.theme-ready *::before,
  html.theme-ready *::after{ transition:none; }
}

/* ================== Theme toggle button ================== */
.th-toggle{
  --th-size: 40px;
  width: var(--th-size);
  height: var(--th-size);
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}
.th-toggle:hover{
  background: var(--surface-2);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}
.th-toggle:active{ transform: translateY(0); }
.th-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--gold-soft-2);
  border-color: var(--gold);
}
.th-toggle .th-ic{
  width: 18px;
  height: 18px;
  display: block;
}
.th-toggle .th-ic.sun{ display: none; }
.th-toggle .th-ic.moon{ display: block; }
:root[data-theme="light"] .th-toggle .th-ic.sun{ display: block; }
:root[data-theme="light"] .th-toggle .th-ic.moon{ display: none; }

/* Floating variant for auth pages */
.th-toggle-float{
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 200;
  --th-size: 42px;
}

/* Compact variant for sidebars */
.th-toggle-compact{
  --th-size: 28px;
  border-radius: 8px;
  box-shadow: none;
}
.th-toggle-compact .th-ic{ width: 14px; height: 14px; }

/* ================== Image filters per theme ================== */
:root[data-theme="light"] .invert-on-light{
  filter: invert(1) hue-rotate(180deg);
}
:root[data-theme="dark"] .invert-on-dark{
  filter: invert(1) hue-rotate(180deg);
}

/* Hide brand logo variant by theme */
.brand-only-dark{ display: inline-block; }
.brand-only-light{ display: none; }
:root[data-theme="light"] .brand-only-dark{ display: none; }
:root[data-theme="light"] .brand-only-light{ display: inline-block; }

/* ================== Scrollbar ================== */
*::-webkit-scrollbar{ width: 6px; height: 6px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: var(--line-strong);
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover{ background: var(--muted); }

/* ================== Selection ================== */
::selection{ background: var(--gold-soft-2); color: var(--text); }
