/* ============ NEWJEANS THEME ============ */
html[data-color="newjeans"]{ --brand-h:220; }

html[data-theme="dark"][data-color="newjeans"]{
  --bg: #040509;
  --card: #10121A;
  --text: #F5F7FF;
  --muted: #AAB2CC;
  --line: #2D3345;
  --surface-2: #181B26;
  --surface-3: #1F2430;
  --brand: #4A5F90;
  --brand-2: #7E93BA;
  --brand-3: #9FB8D2;
  --brand-4: #BFE2FF;
  --danger: #F06272;
}

html[data-theme="light"][data-color="newjeans"]{
  --bg: #F8FAFF;
  --card: #FFFFFF;
  --text: #111320;
  --muted: #4B5268;
  --line: #D0D8EA;
  --surface-2: #E5ECF8;
  --surface-3: #D0D8EA;
  --brand: #284377;
  --brand-2: #4A5F90;
  --brand-3: #7E93BA;
  --brand-4: #9FB8D2;
  --danger: #F06272;
}

/* NJ Core Brand Tokens */
html[data-color="newjeans"]{
  /* Core denim blues */
  --nj-denim-900: #1B2F55;
  --nj-denim-800: #284377;
  --nj-denim-700: #4A5F90;
  --nj-denim-400: #7E93BA;
  --nj-denim-200: #9FB8D2;
  /* Neutrals */
  --nj-white: #FFFFFF;
  --nj-offwhite: #F8FAFF;
  --nj-black: #040509;
  --nj-soft-black: #10121A;
  /* Japan brand colors */
  --nj-brand-violet: #4F419B;
  --nj-brand-lime: #E0F984;
  /* Y2K candy accents */
  --nj-candy-pink: #FF8EC7;
  --nj-bubble-lavender: #C3A8FF;
  --nj-soft-mint: #A2F2CA;
  --nj-soft-sky: #BFE2FF;
  --nj-peach: #FFC39A;
  /* Member colors */
  --nj-mem-minji: #FFD84D;
  --nj-mem-hanni: #FF7EB8;
  --nj-mem-danielle: #6FD6A3;
  --nj-mem-haerin: #F9F9FF;
  --nj-mem-hyein: #6EA8FF;
  /* Semantic */
  --nj-ui-success: #20C977;
  --nj-ui-warning: #FFB74D;
  --nj-ui-error: #F06272;
  --nj-ui-info: #42A5F5;
}

/* NewJeans light mode body background */
html[data-theme="light"][data-color="newjeans"] body{
  background: url('../backrounds/new-jeans-backround-1.png') center center / cover no-repeat fixed #F8FAFF;
  color: var(--text);
}

/* NewJeans dark mode body background */
html[data-theme="dark"][data-color="newjeans"] body{
  background: url('../backrounds/new-jeans-backround-1.png') center center / cover no-repeat fixed #040509;
  color: var(--text);
}

/* Container styling */
html[data-color="newjeans"] .container{
  border: 1px solid var(--line);
  border-radius: 24px;
  padding-top: 28px;
  padding-bottom: 28px;
  box-shadow: 0 10px 30px rgba(27,47,85,0.15);
  position: relative;
  z-index: 1;
}
html[data-theme="light"][data-color="newjeans"] .container{
  background: rgba(255,255,255,0.95);
}
html[data-theme="dark"][data-color="newjeans"] .container{
  background: rgba(16,18,26,0.95);
}

/* Card styling */
html[data-color="newjeans"] .card{
  border-color: var(--line);
  box-shadow: 0 6px 20px rgba(27,47,85,0.1);
}

/* Themed cards with NJ gradient */
html[data-theme="light"][data-color="newjeans"] .themed-card::before{
  background: linear-gradient(135deg, rgba(40,67,119,0.15), rgba(159,184,210,0.2));
  opacity: 1;
}
html[data-theme="dark"][data-color="newjeans"] .themed-card::before{
  background: linear-gradient(135deg, rgba(74,95,144,0.3), rgba(126,147,186,0.15));
  opacity: 1;
}
html[data-theme="light"][data-color="newjeans"] .themed-card{
  color: var(--nj-denim-900);
  border-color: rgba(40,67,119,0.25);
}
html[data-theme="dark"][data-color="newjeans"] .themed-card{
  color: var(--nj-white);
  border-color: rgba(126,147,186,0.3);
}
html[data-color="newjeans"] .themed-card .label,
html[data-color="newjeans"] .themed-card .muted{
  color: var(--muted);
}

/* Primary buttons */
html[data-color="newjeans"] button,
html[data-color="newjeans"] .btn{
  background: linear-gradient(180deg, var(--nj-denim-800), var(--nj-denim-900));
  border: 1px solid var(--nj-denim-900);
  color: var(--nj-white);
}
html[data-color="newjeans"] button:hover,
html[data-color="newjeans"] .btn:hover{
  background: linear-gradient(180deg, var(--nj-denim-700), var(--nj-denim-800));
}
html[data-color="newjeans"] button:focus,
html[data-color="newjeans"] .btn:focus{
  box-shadow: 0 0 0 2px rgba(64, 123, 255, 0.45);
}

/* Chips */
html[data-theme="light"][data-color="newjeans"] .chip{
  border-color: rgba(40,67,119,0.3);
  background: rgba(191,226,255,0.3);
  color: var(--nj-denim-800);
}
html[data-theme="dark"][data-color="newjeans"] .chip{
  border-color: rgba(126,147,186,0.4);
  background: rgba(74,95,144,0.2);
  color: var(--nj-denim-200);
}
html[data-color="newjeans"] .chip[aria-pressed="true"]{
  background: linear-gradient(180deg, var(--nj-denim-800), var(--nj-denim-900));
  border-color: var(--nj-denim-900);
  color: var(--nj-white);
}

/* Pills */
html[data-theme="light"][data-color="newjeans"] .pill{
  border-color: rgba(40,67,119,0.25);
  background: linear-gradient(120deg, rgba(191,226,255,0.5), rgba(159,184,210,0.3));
  color: var(--nj-denim-800);
}
html[data-theme="dark"][data-color="newjeans"] .pill{
  border-color: rgba(126,147,186,0.4);
  background: linear-gradient(120deg, rgba(74,95,144,0.3), rgba(45,51,69,0.5));
  color: var(--nj-denim-200);
}

/* Status badges */
html[data-color="newjeans"] .status--current{
  background: linear-gradient(180deg, var(--nj-denim-800), var(--nj-denim-900));
  border-color: var(--nj-denim-900);
  color: var(--nj-white);
}
html[data-theme="light"][data-color="newjeans"] .status--next{
  background: linear-gradient(180deg, rgba(191,226,255,0.6), rgba(159,184,210,0.4));
  border-color: rgba(40,67,119,0.3);
  color: var(--nj-denim-800);
}
html[data-theme="dark"][data-color="newjeans"] .status--next{
  background: linear-gradient(180deg, rgba(74,95,144,0.4), rgba(45,51,69,0.3));
  border-color: rgba(126,147,186,0.4);
  color: var(--nj-denim-200);
}

/* Progress bar */
html[data-color="newjeans"] .progress{
  background: linear-gradient(90deg, var(--nj-denim-800), var(--nj-candy-pink), var(--nj-bubble-lavender));
  background-size: 200% 100%;
  animation: nj-progress-shift 4s ease-in-out infinite;
}
@keyframes nj-progress-shift{
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Clock styling */
html[data-theme="light"][data-color="newjeans"] .clock{
  color: var(--nj-denim-900);
}
html[data-theme="dark"][data-color="newjeans"] .clock{
  color: var(--nj-soft-sky);
  text-shadow: 0 0 20px rgba(191,226,255,0.3);
}
html[data-theme="dark"][data-color="newjeans"] .countdown{
  color: var(--nj-white);
}

/* Schedule table */
html[data-color="newjeans"] .schedule tr.active{
  background: rgba(40,67,119,0.1);
}
html[data-theme="dark"][data-color="newjeans"] .schedule tr.active{
  background: rgba(74,95,144,0.2);
}
html[data-color="newjeans"] .schedule tr.active::before{
  background: var(--nj-denim-800);
  box-shadow: 0 0 8px rgba(40,67,119,0.4);
}

/* Links */
html[data-color="newjeans"] a{
  color: var(--nj-candy-pink);
}
html[data-color="newjeans"] a:hover{
  color: var(--nj-bubble-lavender);
  text-decoration: underline;
}

/* Quick action buttons */
html[data-theme="light"][data-color="newjeans"] .quick-action{
  border-color: var(--line);
  background: var(--nj-offwhite);
}
html[data-theme="dark"][data-color="newjeans"] .quick-action{
  border-color: var(--line);
  background: var(--nj-soft-black);
}
html[data-color="newjeans"] .quick-action:hover{
  border-color: var(--nj-denim-700);
}

/* Add block button */
html[data-color="newjeans"] .add-block-btn{
  background: linear-gradient(180deg, var(--nj-denim-800), var(--nj-denim-900));
  border-color: var(--nj-denim-900);
}

/* Modal and dialog styling */
html[data-theme="light"][data-color="newjeans"] dialog{
  background: var(--nj-white);
  border-color: var(--line);
}
html[data-theme="dark"][data-color="newjeans"] dialog{
  background: var(--nj-soft-black);
  border-color: var(--line);
}

/* Tabs */
html[data-color="newjeans"] .tab[aria-selected="true"]{
  background: rgba(40,67,119,0.1);
  color: var(--nj-denim-800);
}
html[data-theme="dark"][data-color="newjeans"] .tab[aria-selected="true"]{
  background: rgba(74,95,144,0.2);
  color: var(--nj-denim-200);
}

/* Select inputs */
html[data-theme="dark"][data-color="newjeans"] select,
html[data-theme="dark"][data-color="newjeans"] input[type="text"]{
  background: var(--nj-soft-black);
  border-color: var(--line);
  color: var(--text);
}
html[data-color="newjeans"] select:focus,
html[data-color="newjeans"] input:focus{
  border-color: var(--nj-denim-700);
  box-shadow: 0 0 0 2px rgba(40,67,119,0.2);
}

/* Icon buttons */
html[data-color="newjeans"] .icon-btn:hover{
  background: rgba(40,67,119,0.1);
}
html[data-theme="dark"][data-color="newjeans"] .icon-btn:hover{
  background: rgba(74,95,144,0.2);
}

/* Block items in editor */
html[data-theme="dark"][data-color="newjeans"] .block-item{
  background: var(--nj-soft-black);
  border-color: var(--line);
}
html[data-theme="dark"][data-color="newjeans"] .block-item:hover{
  background: #181B26;
}

/* Toast */
html[data-theme="light"][data-color="newjeans"] .toast{
  background: var(--nj-white);
  border: 1px solid var(--nj-denim-700);
  color: var(--text);
}
html[data-theme="dark"][data-color="newjeans"] .toast{
  background: var(--nj-soft-black);
  border: 1px solid var(--nj-denim-700);
  color: var(--text);
}

/* Onboarding */
html[data-theme="light"][data-color="newjeans"] .onboard{
  background: linear-gradient(180deg, #F8FAFF 0%, rgba(159,184,210,0.2) 50%, #F8FAFF 100%);
}
html[data-theme="dark"][data-color="newjeans"] .onboard{
  background: linear-gradient(180deg, #040509 0%, rgba(74,95,144,0.2) 50%, #040509 100%);
}
html[data-theme="light"][data-color="newjeans"] .onboard-card{
  background: var(--nj-white);
  border-color: var(--line);
}
html[data-theme="dark"][data-color="newjeans"] .onboard-card{
  background: var(--nj-soft-black);
  border-color: var(--line);
}