/**
 * Halloween Theme - Spooky Orange & Black
 *
 * A spooky theme with deep blacks, pumpkin oranges, and eerie accents.
 * Perfect for Halloween events and spooky season content.
 * Colors aligned with HexUI preset theme.
 */

:root {
  /* ============================================
     COLORS - Primary theming variables
     ============================================ */

  /* Background layers (darkest to lightest) - from HexUI fill: #1a0a00 */
  --bg-darkest: #0d0500;      /* Void black - page background */
  --bg-dark: #1a0a00;         /* Deep ember - panels, headers */
  --bg-medium: #331a00;       /* Dark pumpkin - cards, inputs */
  --bg-light: #4d2600;        /* Warm ember - hover states */

  /* Border colors - from HexUI border: #ff6600, borderStroke: #2a1a0a */
  --border-dark: #2a1a0a;     /* Inner shadows, deep borders */
  --border-medium: #331a00;   /* Standard borders */
  --border-light: #ff6600;    /* Outer highlights - pumpkin orange */
  --border-gold: #ff6600;     /* Accent borders - pumpkin orange */

  /* Text colors */
  --text-primary: #ffe6cc;    /* Pale orange cream - main text */
  --text-secondary: #ff9933;  /* Bright orange - secondary text */
  --text-muted: #996633;      /* Muted brown - disabled, hints */
  --text-accent: #ff6600;     /* Pumpkin orange - highlights, links */

  /* Theme accent colors - from HexUI accent: #ff6600, accentBright: #ff9933 */
  --theme-primary: #ff6600;   /* Pumpkin orange - primary actions */
  --theme-secondary: #4d2600; /* Dark ember - secondary elements */
  --theme-accent: #ff9933;    /* Bright orange - decorative */

  /* Gold color (legacy support - now orange) */
  --gold: #ff6600;

  /* ============================================
     RARITY COLORS - Universal gaming standard
     ============================================ */
  --rarity-common: #9d9d9d;
  --rarity-uncommon: #1eff00;
  --rarity-rare: #0070dd;
  --rarity-epic: #a335ee;
  --rarity-legendary: #ff8000;

  /* ============================================
     STATUS COLORS - Spooky variants
     ============================================ */
  --color-health: #8b0000;    /* HP - blood red */
  --color-mana: #4b0082;      /* MP - haunted purple */
  --color-xp: #228b22;        /* XP - eerie green */
  --color-hunger: #ff6600;    /* Hunger - pumpkin orange */
  --color-success: #228b22;   /* Success messages */
  --color-warning: #ff9933;   /* Warning messages */
  --color-error: #8b0000;     /* Error messages */
  --color-info: #4b0082;      /* Info messages */

  /* ============================================
     ASSET URLs - Use default assets for now
     ============================================ */

  /* Panel assets (9-slice border-image) */
  --asset-panel-bg: url('/themes/default/assets/panel-bg.png');
  --asset-panel-corner-tl: url('/themes/default/assets/corner-tl.png');
  --asset-panel-corner-tr: url('/themes/default/assets/corner-tr.png');
  --asset-panel-corner-bl: url('/themes/default/assets/corner-bl.png');
  --asset-panel-corner-br: url('/themes/default/assets/corner-br.png');
  --asset-panel-border: url('/themes/default/assets/panel-border.png');

  /* Button assets (3-slice) */
  --asset-button-bg: url('/themes/default/assets/button-bg.png');
  --asset-button-left: url('/themes/default/assets/button-left.png');
  --asset-button-right: url('/themes/default/assets/button-right.png');
  --asset-button-primary-bg: url('/themes/default/assets/button-primary-bg.png');
  --asset-button-primary-left: url('/themes/default/assets/button-primary-left.png');
  --asset-button-primary-right: url('/themes/default/assets/button-primary-right.png');

  /* Input assets */
  --asset-select-arrow: url('/themes/default/assets/select-arrow.png');
  --asset-input-bg: url('/themes/default/assets/input-bg.png');

  /* Decorative assets */
  --asset-divider-h: url('/themes/default/assets/divider-h.png');
  --asset-divider-v: url('/themes/default/assets/divider-v.png');
  --asset-header-bg: url('/themes/default/assets/header-bg.png');

  /* Card/Modal assets (9-slice) */
  --asset-card-border: url('/themes/default/assets/card-border.png');
  --asset-modal-frame: url('/themes/default/assets/modal-frame.png');

  /* Progress bar assets */
  --asset-progress-fill: url('/themes/default/assets/progress-fill.png');
  --asset-progress-track: url('/themes/default/assets/progress-track.png');

  /* Tab assets */
  --asset-tab-active: url('/themes/default/assets/tab-active.png');
  --asset-tab-inactive: url('/themes/default/assets/tab-inactive.png');

  /* ============================================
     DIMENSIONS - Consistent sizing
     ============================================ */
  --border-width: 4px;
  --border-width-thick: 6px;
  --corner-size: 16px;
  --button-cap-width: 12px;
  --panel-padding: 16px;
  --panel-padding-sm: 12px;
  --panel-padding-lg: 24px;
  --border-radius: 4px;
  --border-radius-lg: 8px;

  /* ============================================
     SHADOWS - Depth effects with orange tint
     ============================================ */
  --shadow-sm: 0 1px 2px rgba(50, 20, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(50, 20, 0, 0.5);
  --shadow-lg: 0 4px 8px rgba(50, 20, 0, 0.6);
  --shadow-inset: inset 0 2px 4px rgba(50, 20, 0, 0.4);
  --shadow-glow-gold: 0 0 8px rgba(255, 102, 0, 0.6);

  /* ============================================
     TRANSITIONS - Minimal for static feel
     ============================================ */
  --transition-fast: 0.1s ease;
  --transition-normal: 0.2s ease;
}

/* ============================================
   THEME-SPECIFIC OVERRIDES
   ============================================ */

/* Ensure pixel-perfect rendering for assets */
.pixel-panel,
.pixel-button,
.pixel-input,
.pixel-select {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Halloween-specific glow effects */
.pixel-button:hover {
  box-shadow: 0 0 15px rgba(255, 102, 0, 0.5);
}