/* ============================================
   ENHYPEN THEME
   Dark, minimal aesthetic with blood red accents
   ============================================ */

/* Core Brand Tokens */
html[data-color="enhypen"] {
  /* Core Palette */
  --en-midnight-black: #0B0B0D;
  --en-pure-white: #FFFFFF;
  --en-blood-red: #8C1D18;
  
  /* Secondary Neutrals */
  --en-obsidian-gray: #1A1A1E;
  --en-steel-gray: #2E2E34;
  --en-ash-gray: #9A9AA1;
  
  /* Highlight Accents */
  --en-moonlight-silver: #D1D1D6;
  --en-crimson-glow: #B3261E;
  
  /* Typography */
  --en-text-primary: #FFFFFF;
  --en-text-secondary: #B5B5BC;
  --en-text-muted: #7A7A82;
  --en-text-link: #8C1D18;
  
  /* Map to system variables */
  --brand-h: 3;
  --brand-s: 70%;
  --brand-l: 32%;
  
  /* Background */
  --bg: var(--en-midnight-black);
  --card: var(--en-obsidian-gray);
  --card-alt: var(--en-steel-gray);
  --surface: var(--en-obsidian-gray);
  --surface-alt: var(--en-steel-gray);
  
  /* Text */
  --text: var(--en-text-primary);
  --text-secondary: var(--en-text-secondary);
  --text-muted: var(--en-text-muted);
  
  /* Borders */
  --border: var(--en-steel-gray);
  --border-subtle: rgba(46, 46, 52, 0.6);
  
  /* Brand accent */
  --accent: var(--en-blood-red);
  --accent-hover: var(--en-crimson-glow);
  
  /* Shadows */
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* ============================================
   BACKGROUND IMAGE
   ============================================ */
html[data-color="enhypen"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../backrounds/enhypen-backround.jpg') center/cover no-repeat fixed;
  z-index: -2;
  pointer-events: none;
}

html[data-color="enhypen"]::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(11, 11, 13, 0.85) 0%, rgba(26, 26, 30, 0.8) 50%, rgba(140, 29, 24, 0.3) 100%);
  z-index: -1;
  pointer-events: none;
}

/* ============================================
   LIGHT MODE OVERRIDES (Enhypen stays dark)
   ============================================ */
html[data-color="enhypen"][data-theme="light"] {
  --bg: var(--en-midnight-black);
  --card: var(--en-obsidian-gray);
  --card-alt: var(--en-steel-gray);
  --surface: var(--en-obsidian-gray);
  --surface-alt: var(--en-steel-gray);
  --text: var(--en-text-primary);
  --text-secondary: var(--en-text-secondary);
  --text-muted: var(--en-text-muted);
  --border: var(--en-steel-gray);
}

/* ============================================
   DARK MODE (Native state)
   ============================================ */
html[data-color="enhypen"][data-theme="dark"] {
  --bg: var(--en-midnight-black);
  --card: var(--en-obsidian-gray);
  --card-alt: var(--en-steel-gray);
  --surface: var(--en-obsidian-gray);
  --surface-alt: var(--en-steel-gray);
  --text: var(--en-text-primary);
  --text-secondary: var(--en-text-secondary);
  --text-muted: var(--en-text-muted);
  --border: var(--en-steel-gray);
}

/* ============================================
   COMPONENT STYLING
   ============================================ */

/* Cards */
html[data-color="enhypen"] .card,
html[data-color="enhypen"] .block-card,
html[data-color="enhypen"] .period-card {
  background: var(--en-obsidian-gray) !important;
  border: 1px solid var(--en-steel-gray) !important;
  border-radius: 6px !important;
  color: var(--en-text-primary) !important;
}

html[data-color="enhypen"] .card:hover,
html[data-color="enhypen"] .block-card:hover {
  border-color: var(--en-blood-red) !important;
  box-shadow: 0 0 20px rgba(140, 29, 24, 0.3) !important;
}

/* Active/Current block card */
html[data-color="enhypen"] .block-card.current,
html[data-color="enhypen"] .period-card.active {
  background: linear-gradient(135deg, var(--en-obsidian-gray) 0%, rgba(140, 29, 24, 0.2) 100%) !important;
  border-color: var(--en-blood-red) !important;
  box-shadow: 0 0 24px rgba(140, 29, 24, 0.4) !important;
}

/* Buttons - Primary */
html[data-color="enhypen"] .btn-primary,
html[data-color="enhypen"] button[type="submit"],
html[data-color="enhypen"] .primary-btn {
  background: var(--en-blood-red) !important;
  color: var(--en-pure-white) !important;
  border: none !important;
  border-radius: 6px !important;
}

html[data-color="enhypen"] .btn-primary:hover,
html[data-color="enhypen"] button[type="submit"]:hover,
html[data-color="enhypen"] .primary-btn:hover {
  background: var(--en-crimson-glow) !important;
  box-shadow: 0 0 16px rgba(179, 38, 30, 0.5) !important;
}

/* Buttons - Secondary */
html[data-color="enhypen"] .btn-secondary,
html[data-color="enhypen"] .quick-action {
  background: var(--en-steel-gray) !important;
  color: var(--en-text-primary) !important;
  border: 1px solid var(--en-steel-gray) !important;
  border-radius: 6px !important;
}

html[data-color="enhypen"] .btn-secondary:hover,
html[data-color="enhypen"] .quick-action:hover {
  background: var(--en-obsidian-gray) !important;
  border-color: var(--en-blood-red) !important;
  color: var(--en-blood-red) !important;
}

/* Chips */
html[data-color="enhypen"] .chip {
  background: var(--en-steel-gray) !important;
  color: var(--en-text-primary) !important;
  border: 1px solid var(--en-steel-gray) !important;
  border-radius: 4px !important;
}

html[data-color="enhypen"] .chip:hover {
  border-color: var(--en-moonlight-silver) !important;
}

html[data-color="enhypen"] .chip[aria-pressed="true"] {
  background: var(--en-blood-red) !important;
  border-color: var(--en-blood-red) !important;
  color: var(--en-pure-white) !important;
}

/* Links */
html[data-color="enhypen"] a {
  color: var(--en-blood-red) !important;
}

html[data-color="enhypen"] a:hover {
  color: var(--en-crimson-glow) !important;
  text-decoration: underline;
}

/* Inputs */
html[data-color="enhypen"] input,
html[data-color="enhypen"] select,
html[data-color="enhypen"] textarea {
  background: var(--en-obsidian-gray) !important;
  color: var(--en-text-primary) !important;
  border: 1px solid var(--en-steel-gray) !important;
  border-radius: 4px !important;
}

html[data-color="enhypen"] input:focus,
html[data-color="enhypen"] select:focus,
html[data-color="enhypen"] textarea:focus {
  border-color: var(--en-blood-red) !important;
  box-shadow: 0 0 0 2px rgba(140, 29, 24, 0.3) !important;
  outline: none !important;
}

/* Dialogs/Modals */
html[data-color="enhypen"] dialog,
html[data-color="enhypen"] .modal {
  background: var(--en-obsidian-gray) !important;
  border: 1px solid var(--en-steel-gray) !important;
  color: var(--en-text-primary) !important;
  border-radius: 8px !important;
}

html[data-color="enhypen"] dialog::backdrop {
  background: rgba(11, 11, 13, 0.9) !important;
}

/* Progress bars */
html[data-color="enhypen"] .progress-bar,
html[data-color="enhypen"] progress {
  background: var(--en-steel-gray) !important;
  border-radius: 4px !important;
}

html[data-color="enhypen"] .progress-fill,
html[data-color="enhypen"] progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--en-blood-red) 0%, var(--en-crimson-glow) 100%) !important;
}

/* Icons - keep default appearance */

/* Scrollbar */
html[data-color="enhypen"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-color="enhypen"] ::-webkit-scrollbar-track {
  background: var(--en-midnight-black);
}

html[data-color="enhypen"] ::-webkit-scrollbar-thumb {
  background: var(--en-steel-gray);
  border-radius: 4px;
}

html[data-color="enhypen"] ::-webkit-scrollbar-thumb:hover {
  background: var(--en-blood-red);
}

/* Text styling */
html[data-color="enhypen"] h1,
html[data-color="enhypen"] h2,
html[data-color="enhypen"] h3,
html[data-color="enhypen"] .title,
html[data-color="enhypen"] .heading {
  color: var(--en-text-primary) !important;
}

html[data-color="enhypen"] .muted,
html[data-color="enhypen"] .secondary,
html[data-color="enhypen"] .caption {
  color: var(--en-text-secondary) !important;
}

/* Time display */
html[data-color="enhypen"] .time-display,
html[data-color="enhypen"] .countdown {
  color: var(--en-text-primary) !important;
  text-shadow: 0 0 20px rgba(140, 29, 24, 0.3);
}

/* Dividers */
html[data-color="enhypen"] hr,
html[data-color="enhypen"] .divider {
  border-color: var(--en-steel-gray) !important;
  background: var(--en-steel-gray) !important;
}

/* Tables */
html[data-color="enhypen"] table {
  border-color: var(--en-steel-gray) !important;
}

html[data-color="enhypen"] th {
  background: var(--en-steel-gray) !important;
  color: var(--en-text-primary) !important;
}

html[data-color="enhypen"] td {
  background: var(--en-obsidian-gray) !important;
  color: var(--en-text-primary) !important;
  border-color: var(--en-steel-gray) !important;
}

html[data-color="enhypen"] tr:hover td {
  background: rgba(140, 29, 24, 0.1) !important;
}

/* Tooltips */
html[data-color="enhypen"] .tooltip,
html[data-color="enhypen"] [data-tooltip]::after {
  background: var(--en-obsidian-gray) !important;
  color: var(--en-text-primary) !important;
  border: 1px solid var(--en-steel-gray) !important;
}

/* Nav/Header - transparent to show background image */
html[data-color="enhypen"] nav,
html[data-color="enhypen"] header,
html[data-color="enhypen"] .header {
  background: transparent !important;
  border-bottom: none !important;
}

/* Footer */
html[data-color="enhypen"] footer,
html[data-color="enhypen"] .footer {
  background: var(--en-midnight-black) !important;
  border-top: 1px solid var(--en-steel-gray) !important;
  color: var(--en-text-secondary) !important;
}

/* Onboarding */
html[data-color="enhypen"] .onboard-card {
  background: var(--en-obsidian-gray) !important;
  border: 1px solid var(--en-steel-gray) !important;
}

/* Special accent elements */
html[data-color="enhypen"] .accent,
html[data-color="enhypen"] .highlight {
  color: var(--en-blood-red) !important;
}

/* Badge/Tag styling */
html[data-color="enhypen"] .badge,
html[data-color="enhypen"] .tag {
  background: var(--en-blood-red) !important;
  color: var(--en-pure-white) !important;
  border-radius: 4px !important;
}