/* ==========================================================================
   Visual Style - Vampiric Theme

   Dark, gothic aesthetic with elegant calligraphy headers, classic gothic
   serif body text, and a moody dark color palette with blood red accents.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Token Definitions
   -------------------------------------------------------------------------- */

[data-visual-style="vampiric"] {
  /* Semantic Vampiric Color Palette
     Dark, moody colors inspired by gothic architecture and candlelit castles */

  /* Surface colors - dark backgrounds (inverted from light themes) */
  --vampiric-surface-lightest: #2a2426;    /* Lightest dark surface */
  --vampiric-surface-lighter: #241f22;     /* Light dark surface */
  --vampiric-surface-light: #1e191c;       /* Subtle dark surface */
  --vampiric-surface-base: #181316;        /* Primary dark surface */
  --vampiric-surface-medium: #140f12;      /* Medium dark surface */
  --vampiric-surface-dark: #0f0b0d;        /* Darker surface */
  --vampiric-surface-darker: #0b0709;      /* Very dark surface */
  --vampiric-surface-darkest: #070305;     /* Deepest black */
  --vampiric-surface-void-1: #030102;      /* Near pure black */
  --vampiric-surface-void-2: #000;         /* Pure black */

  /* Text colors - pale cream and white (for dark backgrounds) */
  --vampiric-text-lightest: #fff;
  --vampiric-text-lighter: #faf7f4;
  --vampiric-text-light: #f2ebe3;
  --vampiric-text-subtle: #e8e0d8;
  --vampiric-text-muted: #d4cac0;
  --vampiric-text-secondary: #c5b8ab;
  --vampiric-text-body: #e8e0d8;          /* Primary readable text for body */
  --vampiric-text-primary: #e8e0d8;       /* Primary pale text */
  --vampiric-text-emphasis: #f2ebe3;
  --vampiric-text-strong: #faf7f4;

  /* Accent - deep blood red with gold undertones */
  --vampiric-accent: #a8181f;             /* Deep blood red */
  --vampiric-accent-rgb: 168, 24, 31;     /* RGB values for alpha usage */
  --vampiric-gold: #d4af37;               /* Dark gold accent */

  /* Map semantic tokens to existing variables for compatibility */

  /* Surface mapping (inverted - dark surfaces) */
  --parchment-50: var(--vampiric-surface-lightest);
  --parchment-100: var(--vampiric-surface-lighter);
  --parchment-200: var(--vampiric-surface-light);
  --parchment-300: var(--vampiric-surface-base);
  --parchment-400: var(--vampiric-surface-medium);
  --parchment-500: var(--vampiric-surface-dark);
  --parchment-600: var(--vampiric-surface-darker);
  --parchment-700: var(--vampiric-surface-darkest);
  --parchment-800: var(--vampiric-surface-void-1);
  --parchment-900: var(--vampiric-surface-void-2);

  /* Legacy parchment aliases */
  --parchment-light: var(--vampiric-surface-light);
  --parchment-base: var(--vampiric-surface-base);
  --parchment-dark: var(--vampiric-surface-medium);

  /* Text color mapping (inverted - light text) */
  --grey-50: var(--vampiric-text-lightest);
  --grey-100: var(--vampiric-text-lighter);
  --grey-200: var(--vampiric-text-light);
  --grey-300: var(--vampiric-text-subtle);
  --grey-400: var(--vampiric-text-muted);
  --grey-500: var(--vampiric-text-secondary);
  --grey-600: var(--vampiric-text-body);
  --grey-700: var(--vampiric-text-primary);
  --grey-800: var(--vampiric-text-emphasis);
  --grey-900: var(--vampiric-text-strong);

  /* Warm grey aliases - inverted for dark theme */
  --warm-grey-light: var(--vampiric-text-emphasis);
  --warm-grey: var(--vampiric-text-primary);
  --warm-grey-dark: var(--vampiric-text-secondary);

  /* Primary and accent colors */
  --color-primary: var(--vampiric-text-primary);
  --color-accent: var(--vampiric-accent);
  --shadow-glow: 0 0 20px rgba(var(--vampiric-accent-rgb), 0.5);

  /* Ink colors - inverted for dark theme (used in rich text) */
  --ink-dark: #e8e0d8;              /* Light for readability on dark */
  --ink-medium: #d4cac0;            /* Slightly muted but still readable */
  --ink-light: #c5b8ab;             /* Even more muted */

  /* Shadows - darker, more dramatic for dark theme */
  --shadow-sm:
    0 1px 3px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:
    0 3px 6px rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg:
    0 6px 12px rgba(0, 0, 0, 0.7),
    0 3px 6px rgba(0, 0, 0, 0.5);
  --shadow-xl:
    0 12px 24px rgba(0, 0, 0, 0.8),
    0 6px 12px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.6);

  /* Typography - distinctive gothic fonts with high contrast */
  --font-heading: 'Cinzel', serif;
  --font-body: 'IM Fell English', serif;
  --font-body-content: 'IM Fell English', serif;
  --font-ui: 'Space Grotesk', sans-serif;

  /* Borders - slightly rounded for gothic elegance */
  --radius-sm: 3px;
  --radius-md: 4px;

  /* Base text color - ensures light-on-dark even when elements inherit
     from outside the vampiric scope (e.g. campaign cards on home page) */
  color: var(--vampiric-text-body);
}

/* --------------------------------------------------------------------------
   Background Pattern - subtle damask
   -------------------------------------------------------------------------- */

body[data-visual-style="vampiric"]::before {
  background:
    radial-gradient(circle at 20% 30%, rgba(168, 24, 31, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.02) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 60px,
      rgba(255, 255, 255, 0.008) 60px,
      rgba(255, 255, 255, 0.008) 120px
    ),
    linear-gradient(to bottom, #181316 0%, #0f0b0d 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

/* --------------------------------------------------------------------------
   Campaign Description - dark gradient for truncation overlay
   -------------------------------------------------------------------------- */

[data-visual-style="vampiric"] .expandable-text-enabled .campaign-description-preview:hover::after {
  background: linear-gradient(to bottom,
    transparent,
    rgba(24, 19, 22, 0.95) 40%,  /* --vampiric-surface-base */
    var(--parchment-base) 60%
  );
}

/* --------------------------------------------------------------------------
   Drop Caps - elegant calligraphy with blood red glow
   Applied via .drop-cap class on rich text containers
   -------------------------------------------------------------------------- */

[data-visual-style="vampiric"] .drop-cap > :first-child::first-letter {
  font-family: Tangerine, cursive;
  font-weight: 700;
  font-size: 6em;
  line-height: 0.7;
  color: var(--campaign-primary-color, var(--vampiric-accent));
  text-shadow:
    0 0 15px rgba(var(--campaign-accent-color, var(--vampiric-accent-rgb)), 0.6),
    0 0 30px rgba(var(--campaign-accent-color, var(--vampiric-accent-rgb)), 0.4),
    2px 2px 4px rgba(0, 0, 0, 0.8);
  margin: 0 0.08em 0 0;
  float: left;
  font-style: normal;
}

/* ==========================================================================
   Categorical UI Overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Base Text - ensure light-on-dark for all content
   -------------------------------------------------------------------------- */

[data-visual-style="vampiric"] h1,
[data-visual-style="vampiric"] h2,
[data-visual-style="vampiric"] h3,
[data-visual-style="vampiric"] h4,
[data-visual-style="vampiric"] h5,
[data-visual-style="vampiric"] h6 {
  color: var(--vampiric-text-strong);
}

[data-visual-style="vampiric"] p {
  color: var(--vampiric-text-body);
}

/* --------------------------------------------------------------------------
   1. SVG & Image Icons - invert all monochrome icons for dark backgrounds
   -------------------------------------------------------------------------- */

/* Broad invert for standalone SVG icon images (game-icons, UI icons, etc.) */
[data-visual-style="vampiric"] img[src*="icons/"],
[data-visual-style="vampiric"] .icon-preview,
[data-visual-style="vampiric"] .icon-selector-icon,
[data-visual-style="vampiric"] .visual-style-svg,
[data-visual-style="vampiric"] .edit-icon-image {
  filter: invert(1);
  opacity: 0.85;
}

/* Inline SVGs used as UI chrome (buttons, close icons, nav) */
[data-visual-style="vampiric"] svg:not(lexxy-editor svg) {
  filter: invert(1) hue-rotate(180deg);
  opacity: 0.8;
}

/* Restore opacity on hover for interactive icon containers */
[data-visual-style="vampiric"] .edit-icon-button:hover .edit-icon-image,
[data-visual-style="vampiric"] .edit-icon-button:hover svg,
[data-visual-style="vampiric"] button:hover svg {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   2. Buttons - campaign color primary, visible secondary
   -------------------------------------------------------------------------- */

[data-visual-style="vampiric"] .button-primary {
  background-color: var(--campaign-primary-color, var(--vampiric-accent));
  border-color: var(--campaign-primary-color, var(--vampiric-accent));
  color: var(--vampiric-text-lightest);
}

[data-visual-style="vampiric"] .button-primary:hover {
  background-color: color-mix(in srgb, var(--campaign-primary-color, var(--vampiric-accent)) 80%, white);
  border-color: color-mix(in srgb, var(--campaign-primary-color, var(--vampiric-accent)) 80%, white);
}

[data-visual-style="vampiric"] .button-secondary {
  color: var(--vampiric-text-subtle);
  border-color: var(--vampiric-surface-lightest);
}

[data-visual-style="vampiric"] .button-secondary:hover {
  color: var(--vampiric-text-lightest);
  background-color: var(--vampiric-surface-lighter);
}

[data-visual-style="vampiric"] .edit-icon-button {
  color: var(--vampiric-text-subtle);
}

[data-visual-style="vampiric"] .edit-icon-button:hover {
  color: var(--vampiric-text-lightest);
  background: var(--vampiric-surface-lighter);
}

/* --------------------------------------------------------------------------
   3. Links
   -------------------------------------------------------------------------- */

[data-visual-style="vampiric"] .cancel-link {
  color: var(--vampiric-text-subtle);
}

[data-visual-style="vampiric"] .cancel-link:hover {
  color: var(--vampiric-text-lightest);
}

[data-visual-style="vampiric"] .danger-link {
  color: #e05555;
}

/* --------------------------------------------------------------------------
   4. Form Controls - inputs, selects, textareas
   -------------------------------------------------------------------------- */

[data-visual-style="vampiric"] .text-input,
[data-visual-style="vampiric"] .color-input,
[data-visual-style="vampiric"] textarea,
[data-visual-style="vampiric"] input[type="text"],
[data-visual-style="vampiric"] input[type="number"],
[data-visual-style="vampiric"] input[type="email"],
[data-visual-style="vampiric"] input[type="password"],
[data-visual-style="vampiric"] input[type="url"],
[data-visual-style="vampiric"] select {
  background-color: var(--vampiric-surface-lighter);
  border-color: var(--vampiric-surface-lightest);
  color: var(--vampiric-text-body);
}

[data-visual-style="vampiric"] .text-input:focus,
[data-visual-style="vampiric"] .color-input:focus,
[data-visual-style="vampiric"] textarea:focus,
[data-visual-style="vampiric"] input:focus,
[data-visual-style="vampiric"] select:focus {
  border-color: var(--campaign-primary-color, var(--vampiric-accent));
}

[data-visual-style="vampiric"] input::placeholder,
[data-visual-style="vampiric"] textarea::placeholder {
  color: var(--vampiric-text-secondary);
}

/* Select dropdown arrow - light chevron for dark background */
[data-visual-style="vampiric"] select.text-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c5b8ab' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   5. Modals & Dialogs - dark surfaces for all modal types
   -------------------------------------------------------------------------- */

[data-visual-style="vampiric"] .modal-content {
  background-color: var(--vampiric-surface-base);
  border-color: var(--vampiric-surface-lightest);
}

[data-visual-style="vampiric"] .modal-footer {
  background-color: var(--vampiric-surface-dark);
  border-top-color: var(--vampiric-surface-lightest);
}

[data-visual-style="vampiric"] .modal-shortcut kbd {
  background-color: var(--vampiric-surface-lighter);
  border-color: var(--vampiric-surface-lightest);
  color: var(--vampiric-text-muted);
}

/* Icon selector modal */
[data-visual-style="vampiric"] .icon-selector-content {
  background-color: var(--vampiric-surface-base);
  border-color: var(--vampiric-surface-lightest);
}

[data-visual-style="vampiric"] .icon-selector-header {
  background-color: var(--vampiric-surface-dark);
  border-bottom-color: var(--vampiric-surface-lightest);
}

[data-visual-style="vampiric"] .icon-selector-item {
  background-color: var(--vampiric-surface-lighter);
  border-color: var(--vampiric-surface-lightest);
}

[data-visual-style="vampiric"] .icon-selector-item:hover {
  background-color: var(--vampiric-surface-light);
  border-color: var(--vampiric-text-muted);
}

[data-visual-style="vampiric"] .icon-selector-item.selected {
  background-color: rgba(var(--vampiric-accent-rgb), 0.2);
  border-color: var(--campaign-primary-color, var(--vampiric-accent));
  box-shadow: 0 0 0 3px rgba(var(--vampiric-accent-rgb), 0.3);
}

/* Icon selector preview in forms */
[data-visual-style="vampiric"] .icon-selector-preview-container {
  background-color: var(--vampiric-surface-lighter);
  border-color: var(--vampiric-surface-lightest);
}

/* --------------------------------------------------------------------------
   6. Card-Style Pickers (visual style, color scheme, etc.)
   -------------------------------------------------------------------------- */

[data-visual-style="vampiric"] .visual-style-option {
  background: var(--vampiric-surface-base);
  border-color: var(--vampiric-surface-lightest);
  color: var(--vampiric-text-body);
}

[data-visual-style="vampiric"] .visual-style-option:hover {
  background: var(--vampiric-surface-lighter);
  border-color: var(--campaign-primary-color, var(--vampiric-accent));
}

[data-visual-style="vampiric"] .visual-style-radio:checked + .visual-style-option {
  background: var(--vampiric-surface-lighter);
  border-color: var(--campaign-primary-color, var(--vampiric-accent));
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px var(--campaign-primary-color, var(--vampiric-accent));
}

[data-visual-style="vampiric"] .visual-style-name {
  color: var(--vampiric-text-strong);
}

[data-visual-style="vampiric"] .visual-style-desc {
  color: var(--vampiric-text-muted);
}

/* --------------------------------------------------------------------------
   7. Lexxy Rich Text Editor
   -------------------------------------------------------------------------- */

/* Override Lexxy color variables for both editor and display content */
[data-visual-style="vampiric"] lexxy-editor,
[data-visual-style="vampiric"] .lexxy-content {
  --lexxy-color-canvas: var(--vampiric-surface-lighter);
  --lexxy-color-ink: var(--vampiric-text-body);
  --lexxy-color-ink-medium: var(--vampiric-text-muted);
  --lexxy-color-ink-lighter: var(--vampiric-surface-lightest);
  --lexxy-color-ink-lightest: var(--vampiric-surface-dark);
  --lexxy-color-ink-inverted: var(--vampiric-surface-dark);
  --lexxy-color-text: var(--vampiric-text-body);
  --lexxy-color-text-subtle: var(--vampiric-text-muted);
  --lexxy-color-link: var(--vampiric-gold);
  --lexxy-color-accent-dark: var(--vampiric-accent);
  --lexxy-color-accent-medium: color-mix(in srgb, var(--vampiric-accent) 80%, white);
  --lexxy-color-selected: rgba(var(--vampiric-accent-rgb), 0.25);
  --lexxy-color-selected-hover: rgba(var(--vampiric-accent-rgb), 0.35);
}

[data-visual-style="vampiric"] lexxy-editor {
  border-color: var(--vampiric-surface-lightest);
  color: var(--vampiric-text-body);
}

/* Toolbar text/icon color — inherits via currentColor into SVG fill */
[data-visual-style="vampiric"] lexxy-toolbar {
  color: var(--vampiric-text-light);
}