/* ============ STRAY KIDS THEME ============ */
html[data-color="straykids"]{ --brand-h:0; }

html[data-theme="dark"][data-color="straykids"]{
  --bg: #050608;
  --card: #0B0D12;
  --text: #FFFFFF;
  --muted: #9CA3AF;
  --line: #303544;
  --surface-2: #141721;
  --surface-3: #1F2430;
  --brand: #F44336;
  --brand-2: #E53935;
  --brand-3: #EF5350;
  --brand-4: #FF5252;
  --danger: #FFCDD2;
}

html[data-theme="light"][data-color="straykids"]{
  --bg: #fafafa;
  --card: #ffffff;
  --text: #050608;
  --muted: #474F63;
  --line: #E0E0E3;
  --surface-2: #f5f5f5;
  --surface-3: #eeeeee;
  --brand: #F44336;
  --brand-2: #E53935;
  --brand-3: #EF5350;
  --brand-4: #FF5252;
  --danger: #E53935;
}

/* SKZ Core Brand Tokens */
html[data-color="straykids"]{
  --skz-core-black: #050608;
  --skz-core-white: #FFFFFF;
  --skz-core-red: #F44336;
  --skz-core-red-deep: #B0121D;
  --skz-core-gray: #2B2B30;
  --skz-core-light-gray: #E0E0E3;
  --skz-alt-green: #4CAF50;
  --skz-alt-yellow: #FFCA28;
  --skz-hot-pink: #F9537F;
  --skz-sky-blue: #2986CC;
  /* Member colors */
  --skz-mem-chan: #1E88E5;
  --skz-mem-leeknow: #E53935;
  --skz-mem-changbin: #111111;
  --skz-mem-hyunjin: #FB8C00;
  --skz-mem-han: #8E24AA;
  --skz-mem-felix: #FAFAFA;
  --skz-mem-seungmin: #8D6E63;
  --skz-mem-in: #43A047;
  /* Era palettes */
  --era-noeasy-lime: #00FF6A;
  --era-noeasy-navy: #020617;
  --era-noeasy-violet: #7C3AED;
  --era-oddinary-neon: #7CFF00;
  --era-oddinary-charcoal: #111827;
  --era-maxident-pink: #FF3FB0;
  --era-maxident-soft-pink: #FFC1E3;
  --era-5star-gold: #F5C84C;
  --era-5star-deep-red: #7F0010;
  --era-5star-black: #050505;
  /* UI Neutrals */
  --skz-bg-0: #050608;
  --skz-bg-1: #0B0D12;
  --skz-bg-2: #141721;
  --skz-bg-3: #1F2430;
  --skz-border-subtle: #303544;
  --skz-border-strong: #474F63;
  --skz-shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
  --skz-shadow-hard: 0 18px 45px rgba(0,0,0,0.55);
  /* Text */
  --skz-text-primary: #FFFFFF;
  --skz-text-secondary: #E2E6F0;
  --skz-text-muted: #9CA3AF;
  --skz-text-inverse: #000000;
  /* Semantic */
  --skz-ui-success: #2ECC71;
  --skz-ui-warning: #F1C40F;
  --skz-ui-error: #E53935;
  --skz-ui-info: #3498DB;
}

/* Stray Kids dark mode body background */
html[data-theme="dark"][data-color="straykids"] body{
  background: url('../backrounds/stray-kids-backround.avif') center center / cover no-repeat fixed #050608;
  color: var(--skz-text-primary);
}

/* Stray Kids light mode body */
html[data-theme="light"][data-color="straykids"] body{
  background: url('../backrounds/stray-kids-backround.avif') center center / cover no-repeat fixed #fafafa;
  color: var(--text);
}

/* Container styling */
html[data-color="straykids"] .container{
  border: 1px solid var(--skz-border-subtle);
  border-radius: 24px;
  padding-top: 28px;
  padding-bottom: 28px;
  box-shadow: var(--skz-shadow-soft);
  background: rgba(11,13,18,0.92);
  position: relative;
  z-index: 1;
}
html[data-theme="light"][data-color="straykids"] .container{
  background: rgba(255,255,255,0.95);
  border-color: rgba(244,67,54,0.15);
}

/* Card styling */
html[data-color="straykids"] .card{
  border-color: var(--skz-border-subtle);
  box-shadow: var(--skz-shadow-soft);
  background: var(--skz-bg-2);
}
html[data-theme="light"][data-color="straykids"] .card{
  background: #ffffff;
  border-color: var(--skz-core-light-gray);
}

/* Themed cards with SKZ gradient */
html[data-color="straykids"] .themed-card::before{
  background: linear-gradient(135deg, rgba(244,67,54,0.25), rgba(176,18,29,0.15));
  opacity: 1;
}
html[data-color="straykids"] .themed-card{
  color: var(--skz-text-primary);
  border-color: rgba(244,67,54,0.3);
}
html[data-color="straykids"] .themed-card .label,
html[data-color="straykids"] .themed-card .muted{
  color: var(--skz-text-secondary);
}
html[data-theme="light"][data-color="straykids"] .themed-card::before{
  background: linear-gradient(135deg, rgba(244,67,54,0.12), rgba(176,18,29,0.08));
}
html[data-theme="light"][data-color="straykids"] .themed-card{
  color: var(--skz-core-black);
}
html[data-theme="light"][data-color="straykids"] .themed-card .label,
html[data-theme="light"][data-color="straykids"] .themed-card .muted{
  color: var(--skz-core-gray);
}

/* Primary buttons */
html[data-color="straykids"] button,
html[data-color="straykids"] .btn{
  background: linear-gradient(180deg, var(--skz-core-red), #D32F2F);
  border: 1px solid #B71C1C;
  color: var(--skz-core-white);
}
html[data-color="straykids"] button:hover,
html[data-color="straykids"] .btn:hover{
  background: linear-gradient(180deg, #D32F2F, #B71C1C);
}
html[data-color="straykids"] button:focus,
html[data-color="straykids"] .btn:focus{
  box-shadow: 0 0 0 2px rgba(244,67,54,0.6);
}

/* Chips */
html[data-color="straykids"] .chip{
  border-color: rgba(244,67,54,0.4);
  background: rgba(244,67,54,0.1);
  color: var(--skz-core-red);
}
html[data-color="straykids"] .chip[aria-pressed="true"]{
  background: linear-gradient(180deg, var(--skz-core-red), #D32F2F);
  border-color: #B71C1C;
  color: var(--skz-core-white);
}

/* Pills */
html[data-color="straykids"] .pill{
  border-color: rgba(244,67,54,0.4);
  background: linear-gradient(120deg, rgba(244,67,54,0.2), rgba(176,18,29,0.1));
  color: var(--skz-text-primary);
}
html[data-theme="light"][data-color="straykids"] .pill{
  color: var(--skz-core-red);
}

/* Status badges */
html[data-color="straykids"] .status--current{
  background: linear-gradient(180deg, var(--skz-core-red), #D32F2F);
  border-color: #B71C1C;
  color: var(--skz-core-white);
}
html[data-color="straykids"] .status--next{
  background: linear-gradient(180deg, rgba(244,67,54,0.2), rgba(244,67,54,0.1));
  border-color: rgba(244,67,54,0.5);
  color: var(--skz-core-red);
}
html[data-theme="dark"][data-color="straykids"] .status--next{
  color: #FF8A80;
}

/* Progress bar */
html[data-color="straykids"] .progress{
  background: linear-gradient(90deg, var(--skz-core-red), var(--skz-hot-pink), var(--skz-sky-blue));
  background-size: 200% 100%;
  animation: skz-progress-shift 3s ease-in-out infinite;
}
@keyframes skz-progress-shift{
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Clock styling */
html[data-theme="dark"][data-color="straykids"] .clock{
  color: var(--skz-core-white);
  text-shadow: 0 0 20px rgba(244,67,54,0.5);
}
html[data-theme="dark"][data-color="straykids"] .countdown{
  color: var(--skz-core-white);
}
html[data-theme="dark"][data-color="straykids"] #clockOut{
  color: var(--era-5star-gold);
}
html[data-theme="dark"][data-color="straykids"] #schoolState,
html[data-theme="dark"][data-color="straykids"] #tzOut,
html[data-theme="dark"][data-color="straykids"] #dateOut{
  color: var(--skz-text-secondary);
}

/* Schedule table */
html[data-color="straykids"] .schedule tr.active{
  background: rgba(244,67,54,0.15);
}
html[data-color="straykids"] .schedule tr.active::before{
  background: var(--skz-core-red);
  box-shadow: 0 0 8px rgba(244,67,54,0.5);
}

/* Links and tertiary actions */
html[data-color="straykids"] a{
  color: var(--skz-hot-pink);
}
html[data-color="straykids"] a:hover{
  color: var(--skz-sky-blue);
  text-decoration: underline;
}

/* Quick action buttons */
html[data-color="straykids"] .quick-action{
  border-color: var(--skz-border-subtle);
  background: var(--skz-bg-2);
}
html[data-color="straykids"] .quick-action:hover{
  background: var(--skz-bg-3);
  border-color: var(--skz-core-red);
}
html[data-theme="light"][data-color="straykids"] .quick-action{
  background: #fafafa;
  border-color: var(--skz-core-light-gray);
}

/* Add block button */
html[data-color="straykids"] .add-block-btn{
  background: linear-gradient(180deg, var(--skz-core-red), #D32F2F);
  border-color: #B71C1C;
}

/* Modal and dialog styling */
html[data-color="straykids"] dialog{
  background: var(--skz-bg-1);
  border-color: var(--skz-border-subtle);
}
html[data-theme="light"][data-color="straykids"] dialog{
  background: #ffffff;
}

/* Tabs */
html[data-color="straykids"] .tab[aria-selected="true"]{
  background: rgba(244,67,54,0.15);
  color: var(--skz-core-red);
}

/* Select inputs */
html[data-theme="dark"][data-color="straykids"] select,
html[data-theme="dark"][data-color="straykids"] input[type="text"]{
  background: var(--skz-bg-2);
  border-color: var(--skz-border-subtle);
  color: var(--skz-text-primary);
}
html[data-theme="dark"][data-color="straykids"] select:focus,
html[data-theme="dark"][data-color="straykids"] input:focus{
  border-color: var(--skz-core-red);
  box-shadow: 0 0 0 2px rgba(244,67,54,0.3);
}

/* Icon buttons */
html[data-color="straykids"] .icon-btn:hover{
  background: rgba(244,67,54,0.15);
}

/* Block items in editor */
html[data-theme="dark"][data-color="straykids"] .block-item{
  background: var(--skz-bg-2);
  border-color: var(--skz-border-subtle);
}
html[data-theme="dark"][data-color="straykids"] .block-item:hover{
  background: var(--skz-bg-3);
}

/* Toast */
html[data-color="straykids"] .toast{
  background: var(--skz-bg-2);
  border: 1px solid var(--skz-core-red);
  color: var(--skz-text-primary);
}

/* Onboarding */
html[data-color="straykids"] .onboard{
  background: linear-gradient(180deg, #050608 0%, rgba(127,0,16,0.3) 50%, #050608 100%);
}
html[data-theme="light"][data-color="straykids"] .onboard{
  background: linear-gradient(180deg, #fafafa 0%, rgba(244,67,54,0.08) 50%, #fafafa 100%);
}
html[data-color="straykids"] .onboard-card{
  background: var(--skz-bg-1);
  border-color: var(--skz-border-subtle);
}
html[data-theme="light"][data-color="straykids"] .onboard-card{
  background: #ffffff;
}