/* ============================================================
   Product Design — interactive demo skins
   Playbook (default) · Los Alamos (LANL) · n2 Demo (marketing red)
   Applied via #demo-skin-root[data-demo-skin="…"]
   ============================================================ */

#demo-skin-root {
  /* Playbook defaults — inherit live accent tokens (Neutral default = slate) */
  --demo-bg: #faf9f6;
  --demo-surface: #ffffff;
  --demo-soft: #faf9f6;
  --demo-hover: #f3f1ec;
  --demo-ink: #3d3936;
  --demo-ink2: #5c5546;
  --demo-ink3: #8a8370;
  --demo-border: #edecea;
  --demo-primary: var(--spectrum-violet-blue, #475569);
  --demo-accent: var(--spectrum-violet-blue, #475569);
  --demo-danger: #9f0218;
  --demo-danger-soft: #fee2e2;
  --demo-ok-bg: #ecfdf5;
  --demo-ok-ink: #065f46;
  --demo-warn-bg: #fffbeb;
  --demo-warn-ink: #92400e;
  --demo-info-bg: #eff6ff;
  --demo-info-ink: #1e40af;
  --demo-radius: 0.75rem;
  --demo-font: "Work Sans", system-ui, sans-serif;
}

#demo-skin-root[data-demo-skin="losAlamos"] {
  --demo-bg: #f4f1e9;
  --demo-surface: #ffffff;
  --demo-soft: #eae4d3;
  --demo-hover: #e2dac7;
  --demo-ink: #1f1f1d;
  --demo-ink2: #5c5546;
  --demo-ink3: #8a8370;
  --demo-border: rgba(0, 47, 108, 0.12);
  --demo-primary: #002f6c;
  --demo-accent: #c8a52c;
  --demo-danger: #9f0218;
  --demo-danger-soft: #f5e6e6;
  --demo-ok-bg: #e8f0e9;
  --demo-ok-ink: #1a3d2a;
  --demo-warn-bg: #f7f0d8;
  --demo-warn-ink: #5c4a12;
  --demo-info-bg: #e4ecf5;
  --demo-info-ink: #002f6c;
  --demo-font: Inter, system-ui, sans-serif;
}

#demo-skin-root[data-demo-skin="n2Demo"] {
  --demo-bg: #fafafa;
  --demo-surface: #ffffff;
  --demo-soft: #f8f8f8;
  --demo-hover: #f0f0f0;
  --demo-ink: #191919;
  --demo-ink2: #464646;
  --demo-ink3: #737373;
  --demo-border: rgba(0, 0, 0, 0.14);
  --demo-primary: #d70321;
  --demo-accent: #d70321;
  --demo-danger: #d70321;
  --demo-danger-soft: #fff1f2;
  --demo-ok-bg: #ecfdf5;
  --demo-ok-ink: #065f46;
  --demo-warn-bg: #fff7ed;
  --demo-warn-ink: #9a3412;
  --demo-info-bg: #fef2f2;
  --demo-info-ink: #d70321;
  --demo-font: "Work Sans", system-ui, sans-serif;
}

/* —— Skin control chrome —— */
.demo-skin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: -0.5rem 0 1.5rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid #edecea;
  border-radius: 0.75rem;
}

.demo-skin-bar .demo-skin-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8370;
}

.demo-skin-bar .demo-skin-hint {
  font-size: 0.7rem;
  color: #8a8370;
  flex: 1 1 12rem;
  min-width: 0;
}

.demo-skin-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.2rem;
  background: #faf9f6;
  border-radius: 0.5rem;
  border: 1px solid #edecea;
}

.demo-skin-toggle button {
  appearance: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: 0.375rem;
  color: #5c5546;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.demo-skin-toggle button:hover {
  background: #fff;
  color: #3d3936;
}

.demo-skin-toggle button[aria-pressed="true"] {
  background: #fff;
  color: #3d3936;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
  font-weight: 600;
}

.demo-skin-toggle button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--spectrum-violet-blue, #595f9b) 50%, transparent);
  outline-offset: 1px;
}

/* —— Apply tokens inside demo skin root —— */
#demo-skin-root {
  font-family: var(--demo-font);
}

/* Surfaces */
#demo-skin-root .bg-white,
#demo-skin-root .flex-1.bg-white {
  background-color: var(--demo-surface) !important;
  color: var(--demo-ink);
}

#demo-skin-root .bg-\[\#FAF9F6\],
#demo-skin-root .hover\:bg-\[\#FAF9F6\]:hover {
  background-color: var(--demo-soft) !important;
}

#demo-skin-root .border-\[\#EDECEA\],
#demo-skin-root .border,
#demo-skin-root .divide-\[\#EDECEA\] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--demo-border) !important;
}

#demo-skin-root .text-\[\#3D3936\],
#demo-skin-root .text-\[\#3d3936\] {
  color: var(--demo-ink) !important;
}

#demo-skin-root .text-\[\#5C5546\],
#demo-skin-root .text-\[\#5c5546\] {
  color: var(--demo-ink2) !important;
}

#demo-skin-root .text-\[\#8A8370\],
#demo-skin-root .text-\[\#8a8370\] {
  color: var(--demo-ink3) !important;
}

/* Pattern left bars + section accents inside demos use demo primary */
#demo-skin-root .w-\[6px\] {
  background: var(--demo-primary) !important;
}

#demo-skin-root h3[style*="spectrum-violet-blue"],
#demo-skin-root [style*="color:var(--spectrum-violet-blue)"],
#demo-skin-root [style*="color: var(--spectrum-violet-blue)"] {
  color: var(--demo-primary) !important;
}

#demo-skin-root [style*="background:var(--spectrum-violet-blue)"],
#demo-skin-root [style*="background: var(--spectrum-violet-blue)"],
#demo-skin-root [style*="background-color: var(--spectrum-violet-blue)"] {
  background: var(--demo-primary) !important;
  background-color: var(--demo-primary) !important;
}

#demo-skin-root [style*="border-color:var(--spectrum-violet-blue)"],
#demo-skin-root [style*="border-color: var(--spectrum-violet-blue)"] {
  border-color: var(--demo-primary) !important;
}

/* Inputs */
#demo-skin-root input,
#demo-skin-root select,
#demo-skin-root textarea {
  background-color: var(--demo-surface) !important;
  color: var(--demo-ink) !important;
  border-color: var(--demo-border) !important;
  font-family: var(--demo-font);
}

#demo-skin-root input:focus,
#demo-skin-root select:focus,
#demo-skin-root textarea:focus {
  border-color: var(--demo-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--demo-primary) 22%, transparent);
  outline: none;
}

/* Primary CTAs inside demos */
#demo-skin-root button[style*="spectrum-violet-blue"],
#demo-skin-root .demo-primary-btn {
  background: var(--demo-primary) !important;
  color: #fff !important;
  border-color: var(--demo-primary) !important;
}

/* Status chip tones that are skin-aware */
#demo-skin-root .chip-demo[data-chip="Stalled"],
#demo-skin-root .chip-demo[data-chip="Reminder sent"] {
  background: var(--demo-danger-soft) !important;
  border-color: color-mix(in srgb, var(--demo-danger) 25%, var(--demo-border)) !important;
  color: var(--demo-danger) !important;
}

#demo-skin-root[data-demo-skin="n2Demo"] .chip-demo[data-chip="All · 24"] {
  border-color: color-mix(in srgb, var(--demo-primary) 35%, var(--demo-border)) !important;
  color: var(--demo-primary) !important;
}

#demo-skin-root[data-demo-skin="losAlamos"] .dash-phase:hover,
#demo-skin-root[data-demo-skin="losAlamos"] .dash-phase[data-active="true"] {
  border-color: var(--demo-primary) !important;
}

/* Drawer follows skin */
#demo-drawer {
  background: var(--demo-surface, #fff);
  color: var(--demo-ink, #3d3936);
  border-color: var(--demo-border, #edecea);
  font-family: var(--demo-font, inherit);
}

/* When drawer is open, inherit from demo skin if we set vars on html during skin */
html[data-demo-skin-active="losAlamos"] #demo-drawer {
  --demo-surface: #ffffff;
  --demo-ink: #1f1f1d;
  --demo-border: rgba(0, 47, 108, 0.12);
  --demo-primary: #002f6c;
  --demo-font: Inter, system-ui, sans-serif;
  background: #fff;
  border-color: rgba(0, 47, 108, 0.12);
  font-family: Inter, system-ui, sans-serif;
}

html[data-demo-skin-active="n2Demo"] #demo-drawer {
  border-color: rgba(0, 0, 0, 0.14);
  font-family: "Work Sans", system-ui, sans-serif;
}

html[data-demo-skin-active="n2Demo"] #demo-drawer button[style*="spectrum"],
html[data-demo-skin-active="losAlamos"] #demo-drawer button[style*="spectrum"] {
  background: var(--demo-primary, #d70321) !important;
}

/* Soft badge on pattern intros when skin changes — keep section titles readable */
#demo-skin-root .inline-block.uppercase[style*="background"] {
  background: var(--demo-primary) !important;
}

/* Transition so skin switches feel intentional */
#demo-skin-root,
#demo-skin-root .bg-white,
#demo-skin-root input,
#demo-skin-root button {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  #demo-skin-root,
  #demo-skin-root .bg-white,
  #demo-skin-root input,
  #demo-skin-root button,
  .demo-skin-toggle button {
    transition: none !important;
  }
}