/* Demon Slayer Theme - Oppression + Militarism + Decay */
/* Design: Cold stone palette, regimented layout, brutal contrast */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@700&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

html[data-color="demonslayer"]{ --brand-h:0; }

/* Core Palette - Dark Theme */
html[data-theme="dark"][data-color="demonslayer"]{
  --bg: #1E1F22;                    /* Wall Stone Gray */
  --card: #2A2C31;                  /* Ash Concrete */
  --text: #ECEFF4;                  /* Chalk White */
  --muted: #9AA1AA;                 /* Dust Gray */
  --line: #C7CCD6;                  /* Steel Silver */
  --surface-2: #232528;
  --surface-3: #2F3136;
  --blood-rust: #8C1D18;
  --steel-silver: #C7CCD6;
  --scout-green: #2F5D50;
  --military-gold: #B8A14F;
  --titan-flesh: #B54A3A;
}

/* Core Palette - Light Theme */
html[data-theme="light"][data-color="demonslayer"]{
  --bg: #ECEFF4;                    /* Chalk White */
  --card: #FFFFFF;
  --text: #1E1F22;                  /* Wall Stone Gray */
  --muted: #9AA1AA;                 /* Dust Gray */
  --line: #C7CCD6;                  /* Steel Silver */
  --surface-2: #E5E8ED;
  --surface-3: #DDE1E7;
  --blood-rust: #8C1D18;
  --steel-silver: #C7CCD6;
  --scout-green: #2F5D50;
  --military-gold: #B8A14F;
  --titan-flesh: #B54A3A;
}

/* Typography - Headings: IBM Plex Serif */
html[data-color="demonslayer"] .clock,
html[data-color="demonslayer"] #clockOut{
  font-family: 'IBM Plex Serif', serif !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}

html[data-color="demonslayer"] h1,
html[data-color="demonslayer"] h2,
html[data-color="demonslayer"] h3,
html[data-color="demonslayer"] .modal-header strong,
html[data-color="demonslayer"] .onboard-title{
  font-family: 'IBM Plex Serif', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Typography - Body: Inter */
html[data-color="demonslayer"] .label,
html[data-color="demonslayer"] .muted{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

/* Typography - Data/Logs: JetBrains Mono */
html[data-color="demonslayer"] .countdown,
html[data-color="demonslayer"] #elapsedOut,
html[data-color="demonslayer"] #leftOut,
html[data-color="demonslayer"] #nextInOut{
  font-family: 'JetBrains Mono', monospace !important;
}

/* Background - Stone gradient, no glow */
html[data-color="demonslayer"] body{
  background: 
    linear-gradient(180deg, #1E1F22 0%, #2A2C31 100%),
    url('../backrounds/demonslayer-backround.avif') center/cover no-repeat fixed;
  background-blend-mode: overlay;
}

html[data-theme="light"][data-color="demonslayer"] body{
  background: 
    linear-gradient(180deg, rgba(236, 239, 244, 0.95) 0%, rgba(229, 232, 237, 0.97) 100%),
    url('../backrounds/demonslayer-backround.avif') center/cover no-repeat fixed;
  background-blend-mode: overlay;
}

/* Container - Industrial, rigid corners */
html[data-color="demonslayer"] .container{
  border: 2px solid #C7CCD6;
  border-radius: 4px;
  background: var(--card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Cards - Military precision */
html[data-color="demonslayer"] .card{
  border: 1px solid #C7CCD6;
  border-radius: 4px;
  background: #2A2C31;
  transition: all 180ms ease;
}

html[data-color="demonslayer"] .card:hover{
  border-color: #8C1D18;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

html[data-theme="light"][data-color="demonslayer"] .card{
  background: #FFFFFF;
}

/* Themed cards - Blood rust accent */
html[data-color="demonslayer"] .themed-card::before{
  background: linear-gradient(135deg, rgba(140, 29, 24, 0.95), rgba(100, 20, 16, 0.9));
}

html[data-color="demonslayer"] .themed-card{
  color: #ECEFF4;
  border: 2px solid #C7CCD6;
  border-radius: 4px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

html[data-color="demonslayer"] .themed-card .label,
html[data-color="demonslayer"] .themed-card .muted,
html[data-color="demonslayer"] .themed-card #currentName,
html[data-color="demonslayer"] .themed-card #currentRoom,
html[data-color="demonslayer"] .themed-card #currentTimeRange,
html[data-color="demonslayer"] .themed-card #elapsedOut,
html[data-color="demonslayer"] .themed-card #leftOut,
html[data-color="demonslayer"] .themed-card #nextName,
html[data-color="demonslayer"] .themed-card #nextRoom,
html[data-color="demonslayer"] .themed-card #nextTimeRange,
html[data-color="demonslayer"] .themed-card #nextInOut,
html[data-color="demonslayer"] .themed-card #untilOut{
  color: #ECEFF4 !important;
}

/* Dark mode clock styling */
html[data-theme="dark"][data-color="demonslayer"] #clockOut{
  color: #ECEFF4;
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(140, 29, 24, 0.3);
}

html[data-theme="dark"][data-color="demonslayer"] .label,
html[data-theme="dark"][data-color="demonslayer"] .muted,
html[data-theme="dark"][data-color="demonslayer"] #dateOut,
html[data-theme="dark"][data-color="demonslayer"] #schoolState{
  color: #9AA1AA;
}

/* Light mode clock styling */
html[data-theme="light"][data-color="demonslayer"] #clockOut{
  color: #1E1F22;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"][data-color="demonslayer"] .label,
html[data-theme="light"][data-color="demonslayer"] .muted,
html[data-theme="light"][data-color="demonslayer"] #dateOut,
html[data-theme="light"][data-color="demonslayer"] #schoolState{
  color: #9AA1AA;
}

/* Pills - Military badge style */
html[data-color="demonslayer"] .pill{
  border: 2px solid #C7CCD6;
  background: rgba(42, 44, 49, 0.8);
  color: #ECEFF4;
  font-family: 'IBM Plex Serif', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 2px;
}

html[data-theme="light"][data-color="demonslayer"] .pill{
  background: rgba(30, 31, 34, 0.1);
  color: #1E1F22;
  border-color: #8C1D18;
}

/* Progress bar - Blood rust */
html[data-color="demonslayer"] .progress{
  background: linear-gradient(90deg, #8C1D18, #6B1512, #8C1D18);
  box-shadow: 0 0 10px rgba(140, 29, 24, 0.4);
}

html[data-color="demonslayer"] .progress-wrap{
  background: rgba(199, 204, 214, 0.2);
  border: 2px solid #C7CCD6;
  border-radius: 2px;
}

/* Buttons - Primary Command style */
html[data-color="demonslayer"] .btn{
  background: #8C1D18;
  color: #ECEFF4;
  border: 2px solid #C7CCD6;
  font-family: 'IBM Plex Serif', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: all 150ms ease;
}

html[data-color="demonslayer"] .btn:hover{
  background: #6B1512;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(140, 29, 24, 0.3);
}

/* Secondary buttons */
html[data-color="demonslayer"] .icon-btn{
  border: 2px solid transparent;
  transition: all 150ms ease;
}

html[data-color="demonslayer"] .icon-btn:hover{
  background: rgba(199, 204, 214, 0.12);
  border-color: #C7CCD6;
  transform: translateY(-2px);
}

/* Status badges - Regimented */
html[data-color="demonslayer"] .status--current{
  background: linear-gradient(135deg, #8C1D18, #6B1512);
  color: #ECEFF4;
  border: 2px solid #C7CCD6;
  font-family: 'IBM Plex Serif', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 2px;
}

html[data-color="demonslayer"] .status--next{
  background: linear-gradient(135deg, #2A2C31, #1E1F22);
  color: #ECEFF4;
  border: 2px solid #C7CCD6;
  font-family: 'IBM Plex Serif', serif;
  font-weight: 700;
  border-radius: 2px;
}

html[data-color="demonslayer"] .status--done{
  background: rgba(199, 204, 214, 0.2);
  color: #9AA1AA;
  text-decoration: line-through;
}

/* Chips - Cold, controlled */
html[data-color="demonslayer"] .chip{
  border: 2px solid #C7CCD6;
  font-family: 'Inter', sans-serif;
  transition: all 150ms ease;
  border-radius: 2px;
}

html[data-color="demonslayer"] .chip[aria-pressed="true"]{
  background: rgba(140, 29, 24, 0.2);
  border-color: #8C1D18;
  color: #ECEFF4;
}

html[data-color="demonslayer"] .chip:hover{
  border-color: #8C1D18;
  transform: translateY(-2px);
}

/* Schedule table - Military log style */
html[data-color="demonslayer"] .schedule{
  font-family: 'Inter', sans-serif;
}

html[data-color="demonslayer"] .schedule th{
  border-bottom: 2px solid #8C1D18;
  color: #ECEFF4;
  font-family: 'IBM Plex Serif', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html[data-color="demonslayer"] .schedule tr.active{
  background: linear-gradient(90deg, rgba(140, 29, 24, 0.2), rgba(140, 29, 24, 0.05), transparent);
  border-left: 3px solid #8C1D18;
}

html[data-color="demonslayer"] .schedule td{
  border-bottom: 1px solid rgba(199, 204, 214, 0.3);
}

/* Dialogs/Modals - Heavy, brutal frame */
html[data-color="demonslayer"] dialog{
  border: 2px solid #C7CCD6;
  border-radius: 4px;
  background: var(--card);
  box-shadow: 
    0 0 0 4px #1E1F22,
    0 0 0 6px #8C1D18,
    0 25px 80px rgba(0, 0, 0, 0.6);
}

html[data-color="demonslayer"] dialog::backdrop{
  background: rgba(30, 31, 34, 0.92);
}

html[data-color="demonslayer"] .modal-header{
  border-bottom: 2px solid #C7CCD6;
}

html[data-color="demonslayer"] .modal-header strong{
  font-family: 'IBM Plex Serif', serif;
  color: #ECEFF4;
  letter-spacing: 0.04em;
}

/* Onboarding - Cold welcome */
html[data-color="demonslayer"] .onboard-title{
  font-family: 'IBM Plex Serif', serif !important;
  color: #ECEFF4 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html[data-color="demonslayer"] .onboard-card{
  border: 2px solid #C7CCD6;
  box-shadow: 
    0 0 0 2px #8C1D18,
    0 20px 60px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

/* Scrollbar - Steel industrial */
html[data-color="demonslayer"] ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #C7CCD6, #9AA1AA);
  border: 1px solid #1E1F22;
  border-radius: 2px;
}

html[data-color="demonslayer"] ::-webkit-scrollbar-track{
  background: rgba(30, 31, 34, 0.5);
}

/* Section alternating pattern */
html[data-color="demonslayer"] section:nth-child(odd){
  background: rgba(30, 31, 34, 0.3);
}

html[data-color="demonslayer"] section:nth-child(even){
  background: rgba(42, 44, 49, 0.3);
}

/* Navigation-style elements */
html[data-color="demonslayer"] .tabs,
html[data-color="demonslayer"] nav{
  border-bottom: 2px solid #C7CCD6;
}

html[data-color="demonslayer"] .tab{
  color: #ECEFF4;
  font-family: 'Inter', sans-serif;
  transition: all 150ms ease;
}

html[data-color="demonslayer"] .tab:hover{
  color: #8C1D18;
}

html[data-color="demonslayer"] .tab[aria-selected="true"]{
  color: #8C1D18;
  border-bottom: 3px solid #8C1D18;
}

/* Quick action buttons - Militaristic */
html[data-color="demonslayer"] .quick-action{
  border: 2px solid #C7CCD6;
  background: transparent;
  color: #ECEFF4;
  font-family: 'Inter', sans-serif;
  transition: all 150ms ease;
  border-radius: 2px;
}

html[data-color="demonslayer"] .quick-action:hover{
  background: rgba(199, 204, 214, 0.12);
  border-color: #ECEFF4;
  transform: translateY(-2px);
}

html[data-color="demonslayer"] .quick-action.danger{
  border-color: #8C1D18;
  color: #8C1D18;
}

html[data-color="demonslayer"] .quick-action.danger:hover{
  background: rgba(140, 29, 24, 0.12);
}

/* Tips section */
html[data-color="demonslayer"] section:last-of-type{
  border: 2px solid #C7CCD6;
  border-radius: 4px;
}

/* Kiosk mode styling */
html[data-color="demonslayer"] .kiosk-modal-content{
  border: 2px solid #8C1D18;
  background: #1E1F22;
  border-radius: 4px;
}

html[data-color="demonslayer"] .kiosk-modal-title{
  font-family: 'IBM Plex Serif', serif;
  color: #ECEFF4;
}

html[data-color="demonslayer"] .kiosk-key{
  background: #2A2C31;
  border: 2px solid #C7CCD6;
  color: #ECEFF4;
  font-family: 'JetBrains Mono', monospace;
  transition: all 150ms ease;
  border-radius: 2px;
}

html[data-color="demonslayer"] .kiosk-key:hover{
  background: #8C1D18;
  border-color: #ECEFF4;
  transform: translateY(-2px);
}

html[data-color="demonslayer"] .kiosk-pin-dot{
  background: #C7CCD6;
  border-color: #8C1D18;
}

html[data-color="demonslayer"] .kiosk-pin-dot.filled{
  background: #8C1D18;
}

/* Editor blocks */
html[data-color="demonslayer"] .blocks-container{
  border: 2px dashed #C7CCD6;
  background: rgba(42, 44, 49, 0.5);
  border-radius: 2px;
}

/* Day over message */
html[data-color="demonslayer"] .dayover-message{
  border: 2px solid #8C1D18;
  background: linear-gradient(135deg, #1E1F22, #2A2C31);
  font-family: 'IBM Plex Serif', serif;
  border-radius: 4px;
}

/* Input fields - Cold, constrained */
html[data-color="demonslayer"] input,
html[data-color="demonslayer"] select,
html[data-color="demonslayer"] textarea{
  border: 2px solid #C7CCD6;
  border-radius: 2px;
  background: #2A2C31;
  color: #ECEFF4;
  font-family: 'Inter', sans-serif;
}

html[data-color="demonslayer"] input:focus,
html[data-color="demonslayer"] select:focus,
html[data-color="demonslayer"] textarea:focus{
  border-color: #8C1D18;
  outline: none;
  box-shadow: 0 0 0 2px rgba(140, 29, 24, 0.2);
}

html[data-theme="light"][data-color="demonslayer"] input,
html[data-theme="light"][data-color="demonslayer"] select,
html[data-theme="light"][data-color="demonslayer"] textarea{
  background: #FFFFFF;
  color: #1E1F22;
}

/* Accent highlight elements */
html[data-color="demonslayer"] ::selection{
  background: rgba(140, 29, 24, 0.4);
  color: #ECEFF4;
}

/* Links */
html[data-color="demonslayer"] a{
  color: #8C1D18;
}

html[data-color="demonslayer"] a:hover{
  color: #B54A3A;
}

/* Help text */
html[data-color="demonslayer"] .help{
  color: #9AA1AA;
  font-family: 'Inter', sans-serif;
}

/* Kbd elements - Military style */
html[data-color="demonslayer"] .kbd{
  background: #2A2C31;
  border: 1px solid #C7CCD6;
  color: #ECEFF4;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 2px;
}