@layer themes {
/* ══════════════════════════════════════════════════════════════════
   AUSPEX THEME PAIR — Videoccult V1
   Two modes of the same Auspex identity:
     data-vc-theme="auspex_dark"  — Void / Grimoire (dark, default Auspex)
     data-vc-theme="auspex_light" — Parchment / Grimoire (light mode)
   ══════════════════════════════════════════════════════════════════ */

/* ── AUSPEX DARK ─────────────────────────────────────────────────── */
:root[data-vc-theme="auspex_dark"] {
  /* Backgrounds */
  --void:           #0a0908;
  --void2:          #111009;
  --abyss:          #0d0c0a;
  --deep:           #141210;
  --chamber:        #1a1714;
  --altar:          #1f1c18;
  --surface:        #252118;

  /* Aliases used by layout */
  --bg:             #0a0908;
  --bg2:            #111009;
  --panel:          #1a1714;
  --panel2:         #1f1c18;

  /* Text */
  --text:           #e8dfce;
  --static:         #e8dfce;
  --text-secondary: #c8bea8;
  --fog:            #8a8070;
  --dust:           #5a534a;
  --mist:           #a09080;

  /* Accent — Blood as primary link/accent in dark */
  --gold:           #c89b3c;
  --gold-bright:    #e8b84b;
  --gold-pale:      #f0d080;
  --gold-dim:       rgba(200,155,60,0.55);
  --gold-glow:      rgba(200,155,60,0.22);

  --blood:          #7a1212;
  --blood-bright:   #c0392b;
  --blood-glow:     rgba(122,18,18,0.35);

  /* Borders */
  --border:         rgba(232,223,206,0.15);
  --border-bright:  rgba(232,223,206,0.32);
  --rim:            rgba(232,223,206,0.10);
  --line:           rgba(232,223,206,0.08);

  /* Nav overrides */
  --nav-shell:      rgba(10,9,8,0.88);
  --nav-border:     rgba(232,223,206,0.12);
  --nav-active-bg:  rgba(232,223,206,0.07);
  --nav-active-border: rgba(232,223,206,0.18);
  --sidebar-shell:  #0d0c0a;
  --sidebar-border: rgba(232,223,206,0.10);
  --sidebar-active-bg:     rgba(232,223,206,0.06);
  --sidebar-active-border: rgba(232,223,206,0.15);

  /* FX */
  --fx-trace-color:      rgba(200,155,60,0.18);
  --fx-trace-color-2:    rgba(200,155,60,0.08);
  --fx-icegrid-h:        rgba(200,155,60,0.05);
  --fx-icegrid-v:        rgba(200,155,60,0.03);
  --fx-icegrid-opacity:  0.10;

  /* Typography — Auspex doctrine: fraktur display, Cormorant body, VT323 mono */
  --font-occult:    "UnifrakturCook", "UnifrakturMaguntia", serif;
  --font-grimoire:  "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-vhs:       "VT323", "IBM Plex Mono", ui-monospace, monospace;

  /* Radius — Auspex doctrine: zero everywhere */
  --radius:         0px;
  --radius-lg:      0px;
}

/* Body background for auspex_dark */
:root[data-vc-theme="auspex_dark"] body {
  background: #0a0908;
  color: #e8dfce;
}

/* Nav backdrop */
:root[data-vc-theme="auspex_dark"] nav {
  background: rgba(10,9,8,0.88);
}

/* Film grain — dark mode uses the standard scanline+noise overlay, but
   both ::before (noise) and ::after (scanlines) read the existing FX
   toggles so nothing extra is needed here. */

/* Theme card active badge */
:root[data-vc-theme="auspex_dark"] .vc-theme-active {
  border-color: rgba(232,223,206,0.55);
  background:   rgba(232,223,206,0.10);
  color:        #e8dfce;
  box-shadow:   0 0 10px rgba(232,223,206,0.18);
  text-shadow:  none;
}


/* ── AUSPEX LIGHT ────────────────────────────────────────────────── */
:root[data-vc-theme="auspex_light"] {
  /* Backgrounds */
  --void:           #d9ceb2;
  --void2:          #cec3a8;
  --abyss:          #ddd3bb;
  --deep:           #e8dfce;
  --chamber:        #ede5d5;
  --altar:          #f0ead8;
  --surface:        #f4f0e4;

  /* Aliases used by layout */
  --bg:             #d9ceb2;
  --bg2:            #cec3a8;
  --panel:          #e8dfce;
  --panel2:         #ede5d5;

  /* Text */
  --text:           #0a0908;
  --static:         #0a0908;
  --text-secondary: #2a2520;
  --fog:            #5a534a;
  --dust:           #8a8070;
  --mist:           #6a6055;

  /* Accents */
  --gold:           #7a1212;          /* Blood as primary accent in light */
  --gold-bright:    #a01818;
  --gold-pale:      #5a0e0e;
  --gold-dim:       rgba(122,18,18,0.55);
  --gold-glow:      rgba(122,18,18,0.18);

  --blood:          #7a1212;
  --blood-bright:   #a01818;
  --blood-glow:     rgba(122,18,18,0.25);

  /* Borders */
  --border:         rgba(10,9,8,0.22);
  --border-bright:  rgba(10,9,8,0.45);
  --rim:            rgba(10,9,8,0.12);
  --line:           rgba(10,9,8,0.08);

  /* Nav overrides */
  --nav-shell:      rgba(217,206,178,0.88);
  --nav-border:     rgba(10,9,8,0.14);
  --nav-active-bg:  rgba(10,9,8,0.06);
  --nav-active-border: rgba(10,9,8,0.18);
  --sidebar-shell:  #ddd3bb;
  --sidebar-border: rgba(10,9,8,0.12);
  --sidebar-active-bg:     rgba(10,9,8,0.06);
  --sidebar-active-border: rgba(10,9,8,0.18);

  /* FX — parchment grain, multiply blend, muted scanlines */
  --fx-trace-color:      rgba(10,9,8,0.10);
  --fx-trace-color-2:    rgba(10,9,8,0.05);
  --fx-icegrid-h:        rgba(10,9,8,0.04);
  --fx-icegrid-v:        rgba(10,9,8,0.02);
  --fx-icegrid-opacity:  0.07;

  /* Typography — same Auspex fonts */
  --font-occult:    "UnifrakturCook", "UnifrakturMaguntia", serif;
  --font-grimoire:  "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-vhs:       "VT323", "IBM Plex Mono", ui-monospace, monospace;

  /* Radius — Auspex doctrine: zero everywhere */
  --radius:         0px;
  --radius-lg:      0px;
}

/* Body background + text for light mode */
:root[data-vc-theme="auspex_light"] body {
  background: #d9ceb2;
  color: #0a0908;
}

/* Nav backdrop */
:root[data-vc-theme="auspex_light"] nav {
  background: rgba(217,206,178,0.88);
}

/* Scrollbar — light parchment */
:root[data-vc-theme="auspex_light"] ::-webkit-scrollbar-track  { background: #d9ceb2; }
:root[data-vc-theme="auspex_light"] ::-webkit-scrollbar-thumb  { background: rgba(10,9,8,0.22); }

/* Modal backdrop tint — lighter wash */
:root[data-vc-theme="auspex_light"] .modal-backdrop,
:root[data-vc-theme="auspex_light"] #vc-modal-backdrop {
  background: rgba(10,9,8,0.55);
}

/* Auth box — inverted surface */
:root[data-vc-theme="auspex_light"] .auth-box {
  background:  #e8dfce;
  border-color: rgba(10,9,8,0.28);
  box-shadow:  0 0 60px rgba(10,9,8,0.15), 0 32px 80px rgba(10,9,8,0.18);
}

/* Film-grain/scanline overrides for light mode.
   The existing ::before (noise) and ::after (scanlines) are dark-tuned.
   We swap blend modes and tint so they read correctly on parchment. */
:root[data-vc-theme="auspex_light"] body::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.22  0 0 0 0 0.18  0 0 0 0 0.10  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.20;
}
:root[data-vc-theme="auspex_light"] body::after {
  /* Softer scanlines on parchment */
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.04) 2px,
    rgba(0,0,0,0.04) 4px
  );
}

/* Loading overlay */
:root[data-vc-theme="auspex_light"] .loading-overlay {
  background: #d9ceb2;
}
:root[data-vc-theme="auspex_light"] .loading-overlay .logo {
  color: #7a1212;
  text-shadow: none;
}
:root[data-vc-theme="auspex_light"] .loading-spinner {
  border-color: rgba(10,9,8,0.18);
  border-top-color: #7a1212;
}

/* Buttons — invert to dark-on-parchment */
:root[data-vc-theme="auspex_light"] .btn-primary,
:root[data-vc-theme="auspex_light"] .btn {
  background:   #0a0908;
  color:        #e8dfce;
  border-color: #0a0908;
}
:root[data-vc-theme="auspex_light"] .btn-ghost {
  color: #2a2520;
  border-color: rgba(10,9,8,0.35);
}
:root[data-vc-theme="auspex_light"] .btn-ghost:hover {
  color: #7a1212;
  border-color: #7a1212;
  background: rgba(122,18,18,0.06);
}

/* Nav link hover / active */
:root[data-vc-theme="auspex_light"] .nav-links a:hover,
:root[data-vc-theme="auspex_light"] .nav-links a.active {
  color: #7a1212;
  background: rgba(122,18,18,0.07);
  border-color: rgba(122,18,18,0.18);
}

/* Sidebar items */
:root[data-vc-theme="auspex_light"] .sidebar-item:hover,
:root[data-vc-theme="auspex_light"] .sidebar-item.active {
  color: #7a1212;
}

/* Nav logo / hero title */
:root[data-vc-theme="auspex_light"] .nav-logo {
  color: #0a0908;
  text-shadow: none;
  animation: none;
}
:root[data-vc-theme="auspex_light"] .hero-title {
  color: #0a0908;
  text-shadow: none;
  animation: fadeUp 0.7s 0.1s ease both;
}
:root[data-vc-theme="auspex_light"] .hero-divider {
  background: linear-gradient(90deg, transparent, rgba(10,9,8,0.45), transparent);
}

/* Stat values + section titles */
:root[data-vc-theme="auspex_light"] .stat-value,
:root[data-vc-theme="auspex_light"] .section-title,
:root[data-vc-theme="auspex_light"] .feature-title,
:root[data-vc-theme="auspex_light"] .page-header h2,
:root[data-vc-theme="auspex_light"] .settings-section-title {
  color: #0a0908;
  text-shadow: none;
}

/* Settings rows */
:root[data-vc-theme="auspex_light"] .settings-section {
  background: #e8dfce;
  border-color: rgba(10,9,8,0.18);
}
:root[data-vc-theme="auspex_light"] .settings-row-label { color: #2a2520; }
:root[data-vc-theme="auspex_light"] .settings-row-desc  { color: #5a534a; }

/* Toggle */
:root[data-vc-theme="auspex_light"] .toggle-slider { background: rgba(10,9,8,0.15); border-color: rgba(10,9,8,0.25); }
:root[data-vc-theme="auspex_light"] .toggle-slider::before { background: #5a534a; }
:root[data-vc-theme="auspex_light"] .toggle input:checked + .toggle-slider { background: rgba(122,18,18,0.2); border-color: #7a1212; }
:root[data-vc-theme="auspex_light"] .toggle input:checked + .toggle-slider::before { background: #7a1212; }

/* Cards and surfaces */
:root[data-vc-theme="auspex_light"] .card,
:root[data-vc-theme="auspex_light"] .feature-card,
:root[data-vc-theme="auspex_light"] .stat-card,
:root[data-vc-theme="auspex_light"] .film-card,
:root[data-vc-theme="auspex_light"] .vc-modal,
:root[data-vc-theme="auspex_light"] .modal {
  background: #e8dfce;
  border-color: rgba(10,9,8,0.20);
}
:root[data-vc-theme="auspex_light"] .film-card:hover {
  border-color: #7a1212;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 12px rgba(122,18,18,0.15);
}

/* Filmstrip gradient */
:root[data-vc-theme="auspex_light"] .filmstrip-fade.left  { background: linear-gradient(to right,  #d9ceb2, transparent); }
:root[data-vc-theme="auspex_light"] .filmstrip-fade.right { background: linear-gradient(to left,   #d9ceb2, transparent); }
:root[data-vc-theme="auspex_light"] .filmstrip            { background: linear-gradient(180deg, #cec3a8 0%, transparent 50%, #cec3a8 100%); }

/* form inputs */
:root[data-vc-theme="auspex_light"] .form-input {
  background: #f0ead8;
  border-color: rgba(10,9,8,0.22);
  color: #0a0908;
}
:root[data-vc-theme="auspex_light"] .form-input:focus {
  border-color: rgba(10,9,8,0.45);
  box-shadow: 0 0 0 3px rgba(10,9,8,0.06);
}

/* Filter chips */
:root[data-vc-theme="auspex_light"] .filter-chip {
  background: rgba(10,9,8,0.06);
  color: #2a2520;
  border-color: rgba(10,9,8,0.20);
}
:root[data-vc-theme="auspex_light"] .filter-chip:hover,
:root[data-vc-theme="auspex_light"] .filter-chip.active {
  background: rgba(122,18,18,0.10);
  color: #7a1212;
  border-color: rgba(122,18,18,0.40);
}

/* Tag chips */
:root[data-vc-theme="auspex_light"] .tag,
:root[data-vc-theme="auspex_light"] .tag.gold {
  background: rgba(10,9,8,0.08);
  color: #2a2520;
  border-color: rgba(10,9,8,0.18);
}

/* Toasts */
:root[data-vc-theme="auspex_light"] .toast {
  background: #e8dfce;
  border-color: rgba(10,9,8,0.22);
  color: #0a0908;
}

/* Glitch — suppress glow on light */
:root[data-vc-theme="auspex_light"] .glitch::before,
:root[data-vc-theme="auspex_light"] .glitch::after { text-shadow: none; }

/* Candle particles — hide glow blooms on light */
:root[data-vc-theme="auspex_light"] .candle {
  background: #7a1212;
  box-shadow: none;
}

/* Theme card active badge */
:root[data-vc-theme="auspex_light"] .vc-theme-active {
  border-color: rgba(10,9,8,0.55);
  background:   rgba(10,9,8,0.10);
  color:        #0a0908;
  box-shadow:   0 0 8px rgba(10,9,8,0.12);
  text-shadow:  none;
}

/* ── FONT IMPORTS for Auspex ──────────────────────────────────────── */
/* Add to your <head> if not already present:
   <link href="https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=VT323&display=swap" rel="stylesheet">
*/

} /* end @layer themes */