/* ============================================
   ILLIT THEME
   Dreamy, soft aesthetic with Bubblegum Pink
   ============================================ */

/* Core Brand Tokens */
html[data-color="illit"] {
  /* Core Palette (Identity) */
  --il-milk-white: #FFFDFB;
  --il-ink-charcoal: #1E1E24;
  --il-bubblegum-pink: #F6A6C1;
  
  /* Secondary Accents (Play Layer) */
  --il-lavender-pop: #D9C7FF;
  --il-mint-candy: #BEEDE0;
  --il-butter-yellow: #FFF1A8;
  
  /* Structural Neutrals */
  --il-cloud-cream: #F3F1F6;
  --il-soft-line-gray: #E0DEE6;
  --il-muted-lilac: #8E8A9A;
  
  /* Typography Colors */
  --il-text-primary: #1E1E24;
  --il-text-secondary: #5A5868;
  --il-text-muted: #8E8A9A;
  
  /* Map to system variables */
  --brand-h: 340;
  --brand-s: 82%;
  --brand-l: 81%;
  
  /* Background */
  --bg: var(--il-milk-white);
  --card: var(--il-cloud-cream);
  --card-alt: var(--il-milk-white);
  --surface: var(--il-cloud-cream);
  --surface-alt: var(--il-milk-white);
  
  /* Text */
  --text: var(--il-text-primary);
  --text-secondary: var(--il-text-secondary);
  --text-muted: var(--il-text-muted);
  
  /* Borders */
  --border: var(--il-soft-line-gray);
  --border-subtle: rgba(224, 222, 230, 0.6);
  
  /* Brand accent */
  --accent: var(--il-bubblegum-pink);
  --accent-hover: var(--il-lavender-pop);
  
  /* Shadows with soft glow */
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 6px 20px rgba(246, 166, 193, 0.25);
  --shadow-lavender: 0 6px 20px rgba(217, 199, 255, 0.3);
  --shadow-mint: 0 6px 20px rgba(190, 237, 224, 0.3);
}

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

html[data-color="illit"]::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 253, 251, 0.88) 0%, rgba(246, 166, 193, 0.4) 55%, rgba(217, 199, 255, 0.5) 100%);
  z-index: -1;
  pointer-events: none;
}

/* ============================================
   LIGHT MODE (Native state - dreamy soft)
   ============================================ */
html[data-color="illit"][data-theme="light"] {
  --bg: var(--il-milk-white);
  --card: var(--il-cloud-cream);
  --card-alt: var(--il-milk-white);
  --surface: var(--il-cloud-cream);
  --surface-alt: var(--il-milk-white);
  --text: var(--il-text-primary);
  --text-secondary: var(--il-text-secondary);
  --text-muted: var(--il-text-muted);
  --border: var(--il-soft-line-gray);
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */
html[data-color="illit"][data-theme="dark"] {
  --il-bg-dark: #1A1A1F;
  --il-card-dark: #252529;
  --il-card-alt-dark: #2D2D33;
  
  --bg: var(--il-bg-dark);
  --card: var(--il-card-dark);
  --card-alt: var(--il-card-alt-dark);
  --surface: var(--il-card-dark);
  --surface-alt: var(--il-card-alt-dark);
  --text: #F5F4F7;
  --text-secondary: #B8B6C0;
  --text-muted: var(--il-muted-lilac);
  --border: #3A3A42;
}

html[data-color="illit"][data-theme="dark"]::after {
  background: linear-gradient(135deg, rgba(26, 26, 31, 0.92) 0%, rgba(246, 166, 193, 0.15) 55%, rgba(217, 199, 255, 0.2) 100%);
}

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

/* Cards with glass blur effect */
html[data-color="illit"] .card,
html[data-color="illit"] .block-card,
html[data-color="illit"] .period-card {
  background: rgba(243, 241, 246, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--il-soft-line-gray) !important;
  border-radius: 16px !important;
  color: var(--il-text-primary) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

html[data-color="illit"][data-theme="dark"] .card,
html[data-color="illit"][data-theme="dark"] .block-card,
html[data-color="illit"][data-theme="dark"] .period-card {
  background: rgba(37, 37, 41, 0.85) !important;
  border-color: #3A3A42 !important;
  color: #F5F4F7 !important;
}

html[data-color="illit"] .card:hover,
html[data-color="illit"] .block-card:hover {
  transform: scale(1.02) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Active/Current block card */
html[data-color="illit"] .block-card.current,
html[data-color="illit"] .period-card.active {
  background: linear-gradient(135deg, rgba(255, 253, 251, 0.95) 0%, rgba(246, 166, 193, 0.2) 100%) !important;
  border-color: var(--il-bubblegum-pink) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Buttons - Primary (Bubblegum Pink) */
html[data-color="illit"] .btn,
html[data-color="illit"] .btn-primary,
html[data-color="illit"] button[type="submit"],
html[data-color="illit"] .primary-btn {
  background: var(--il-bubblegum-pink) !important;
  color: var(--il-ink-charcoal) !important;
  border: none !important;
  border-radius: 16px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

html[data-color="illit"] .btn:hover,
html[data-color="illit"] .btn-primary:hover,
html[data-color="illit"] button[type="submit"]:hover,
html[data-color="illit"] .primary-btn:hover {
  background: var(--il-lavender-pop) !important;
  color: var(--il-ink-charcoal) !important;
  box-shadow: var(--shadow-lavender) !important;
  transform: scale(1.02) !important;
}

/* Buttons - Secondary */
html[data-color="illit"] .btn-secondary,
html[data-color="illit"] .quick-action {
  background: transparent !important;
  color: var(--il-bubblegum-pink) !important;
  border: 1px solid var(--il-bubblegum-pink) !important;
  border-radius: 16px !important;
  transition: all 0.2s ease !important;
}

html[data-color="illit"] .quick-action:hover,
html[data-color="illit"] .btn-secondary:hover {
  background: rgba(246, 166, 193, 0.1) !important;
  border-color: var(--il-lavender-pop) !important;
  color: var(--il-lavender-pop) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Chips */
html[data-color="illit"] .chip {
  background: var(--il-cloud-cream) !important;
  color: var(--il-text-primary) !important;
  border: 1px solid var(--il-soft-line-gray) !important;
  border-radius: 20px !important;
  transition: all 0.2s ease !important;
}

html[data-color="illit"][data-theme="dark"] .chip {
  background: #2D2D33 !important;
  color: #F5F4F7 !important;
  border-color: #3A3A42 !important;
}

html[data-color="illit"] .chip:hover {
  border-color: var(--il-lavender-pop) !important;
  box-shadow: 0 0 8px rgba(217, 199, 255, 0.3) !important;
  transform: scale(1.02) !important;
}

html[data-color="illit"] .chip[aria-pressed="true"] {
  background: var(--il-bubblegum-pink) !important;
  border-color: var(--il-bubblegum-pink) !important;
  color: var(--il-ink-charcoal) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Links */
html[data-color="illit"] a {
  color: var(--il-bubblegum-pink) !important;
  transition: color 0.2s ease !important;
}

html[data-color="illit"] a:hover {
  color: var(--il-lavender-pop) !important;
}

/* Inputs */
html[data-color="illit"] input,
html[data-color="illit"] select,
html[data-color="illit"] textarea {
  background: var(--il-milk-white) !important;
  color: var(--il-text-primary) !important;
  border: 1px solid var(--il-soft-line-gray) !important;
  border-radius: 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html[data-color="illit"][data-theme="dark"] input,
html[data-color="illit"][data-theme="dark"] select,
html[data-color="illit"][data-theme="dark"] textarea {
  background: #252529 !important;
  color: #F5F4F7 !important;
  border-color: #3A3A42 !important;
}

html[data-color="illit"] input:focus,
html[data-color="illit"] select:focus,
html[data-color="illit"] textarea:focus {
  border-color: var(--il-bubblegum-pink) !important;
  box-shadow: 0 0 0 3px rgba(246, 166, 193, 0.2) !important;
  outline: none !important;
}

/* Dialogs/Modals with glass effect */
html[data-color="illit"] dialog,
html[data-color="illit"] .modal {
  background: rgba(243, 241, 246, 0.98) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--il-soft-line-gray) !important;
  color: var(--il-text-primary) !important;
  border-radius: 24px !important;
}

html[data-color="illit"][data-theme="dark"] dialog,
html[data-color="illit"][data-theme="dark"] .modal {
  background: rgba(37, 37, 41, 0.98) !important;
  border-color: #3A3A42 !important;
  color: #F5F4F7 !important;
}

html[data-color="illit"] dialog::backdrop {
  background: rgba(30, 30, 36, 0.4) !important;
}

/* Progress bars with dreamy gradient */
html[data-color="illit"] .progress-bar,
html[data-color="illit"] progress {
  background: var(--il-cloud-cream) !important;
  border-radius: 12px !important;
}

html[data-color="illit"] .progress,
html[data-color="illit"] .progress-fill,
html[data-color="illit"] progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--il-bubblegum-pink) 0%, var(--il-lavender-pop) 100%) !important;
  border-radius: 12px !important;
}

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

html[data-color="illit"] ::-webkit-scrollbar-track {
  background: var(--il-cloud-cream);
  border-radius: 4px;
}

html[data-color="illit"] ::-webkit-scrollbar-thumb {
  background: var(--il-soft-line-gray);
  border-radius: 4px;
}

html[data-color="illit"] ::-webkit-scrollbar-thumb:hover {
  background: var(--il-bubblegum-pink);
}

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

html[data-color="illit"][data-theme="dark"] h1,
html[data-color="illit"][data-theme="dark"] h2,
html[data-color="illit"][data-theme="dark"] h3,
html[data-color="illit"][data-theme="dark"] .title,
html[data-color="illit"][data-theme="dark"] .heading {
  color: #F5F4F7 !important;
}

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

/* Time display */
html[data-color="illit"] .time-display,
html[data-color="illit"] .countdown,
html[data-color="illit"] .clock {
  color: var(--il-text-primary) !important;
}

html[data-color="illit"][data-theme="dark"] .time-display,
html[data-color="illit"][data-theme="dark"] .countdown,
html[data-color="illit"][data-theme="dark"] .clock {
  color: #F5F4F7 !important;
}

/* Dividers */
html[data-color="illit"] hr,
html[data-color="illit"] .divider {
  border-color: var(--il-soft-line-gray) !important;
  background: var(--il-soft-line-gray) !important;
}

/* Tables */
html[data-color="illit"] table {
  border-color: var(--il-soft-line-gray) !important;
}

html[data-color="illit"] th {
  background: var(--il-cloud-cream) !important;
  color: var(--il-text-primary) !important;
}

html[data-color="illit"] td {
  background: rgba(255, 253, 251, 0.7) !important;
  color: var(--il-text-primary) !important;
  border-color: var(--il-soft-line-gray) !important;
}

html[data-color="illit"][data-theme="dark"] th {
  background: #2D2D33 !important;
  color: #F5F4F7 !important;
}

html[data-color="illit"][data-theme="dark"] td {
  background: rgba(37, 37, 41, 0.7) !important;
  color: #F5F4F7 !important;
  border-color: #3A3A42 !important;
}

html[data-color="illit"] tr:hover td {
  background: rgba(246, 166, 193, 0.1) !important;
}

/* Tooltips */
html[data-color="illit"] .tooltip,
html[data-color="illit"] [data-tooltip]::after {
  background: var(--il-cloud-cream) !important;
  color: var(--il-text-primary) !important;
  border: 1px solid var(--il-soft-line-gray) !important;
  border-radius: 12px !important;
}

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

/* Footer */
html[data-color="illit"] footer,
html[data-color="illit"] .footer {
  background: rgba(243, 241, 246, 0.9) !important;
  backdrop-filter: blur(8px) !important;
  border-top: 1px solid var(--il-soft-line-gray) !important;
  color: var(--il-text-secondary) !important;
}

/* Onboarding */
html[data-color="illit"] .onboard-card {
  background: rgba(243, 241, 246, 0.98) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--il-soft-line-gray) !important;
  border-radius: 24px !important;
}

html[data-color="illit"][data-theme="dark"] .onboard-card {
  background: rgba(37, 37, 41, 0.98) !important;
  border-color: #3A3A42 !important;
}

/* Special accent elements */
html[data-color="illit"] .accent,
html[data-color="illit"] .highlight {
  color: var(--il-bubblegum-pink) !important;
}

/* Badge/Tag styling with dreamy gradient */
html[data-color="illit"] .badge,
html[data-color="illit"] .tag,
html[data-color="illit"] .pill {
  background: linear-gradient(135deg, var(--il-bubblegum-pink) 0%, var(--il-lavender-pop) 100%) !important;
  color: var(--il-ink-charcoal) !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
}

/* Status badges */
html[data-color="illit"] .status {
  border-radius: 20px !important;
}

html[data-color="illit"] .status--current {
  background: var(--il-mint-candy) !important;
  color: var(--il-ink-charcoal) !important;
}

html[data-color="illit"] .status--next {
  background: var(--il-butter-yellow) !important;
  color: var(--il-ink-charcoal) !important;
}

/* Themed cards */
html[data-color="illit"] .themed-card {
  background: linear-gradient(135deg, rgba(255, 253, 251, 0.95) 0%, rgba(246, 166, 193, 0.15) 55%, rgba(217, 199, 255, 0.2) 100%) !important;
  border: 1px solid rgba(246, 166, 193, 0.3) !important;
  border-radius: 20px !important;
}

html[data-color="illit"][data-theme="dark"] .themed-card {
  background: linear-gradient(135deg, rgba(37, 37, 41, 0.95) 0%, rgba(246, 166, 193, 0.1) 55%, rgba(217, 199, 255, 0.15) 100%) !important;
  border-color: rgba(246, 166, 193, 0.2) !important;
}

/* Danger/Warning states */
html[data-color="illit"] .warning {
  color: #E6A700 !important;
}

html[data-color="illit"] .danger {
  color: #E64D4D !important;
}

html[data-color="illit"] .btn.danger,
html[data-color="illit"] button.danger,
html[data-color="illit"] .quick-action.danger {
  background: transparent !important;
  color: #E64D4D !important;
  border: 1px solid #E64D4D !important;
}

html[data-color="illit"] .btn.danger:hover,
html[data-color="illit"] button.danger:hover,
html[data-color="illit"] .quick-action.danger:hover {
  background: rgba(230, 77, 77, 0.1) !important;
}

/* Ghost button */
html[data-color="illit"] .ghost {
  background: transparent !important;
  color: var(--il-text-secondary) !important;
  border: none !important;
}

html[data-color="illit"] .ghost:hover {
  color: var(--il-bubblegum-pink) !important;
}

/* Icon buttons */
html[data-color="illit"] .icon-btn {
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

html[data-color="illit"] .icon-btn:hover {
  background: rgba(246, 166, 193, 0.15) !important;
  transform: scale(1.05) !important;
}

/* Labels */
html[data-color="illit"] .label {
  color: var(--il-text-secondary) !important;
}

/* Kbd/keyboard shortcuts */
html[data-color="illit"] .kbd {
  background: var(--il-cloud-cream) !important;
  border: 1px solid var(--il-soft-line-gray) !important;
  border-radius: 6px !important;
  color: var(--il-text-primary) !important;
}