/*
 * Logo Studio Hub bright/pastel preview overlay.
 *
 * Prototype only: this file is intentionally additive and opt-in via
 * html[data-hub-pastel="true"]. It changes neutral appearance tokens and
 * decorative Hub surfaces only. Operational status colours remain owned by
 * the existing v228/v255/v257/v258 styles.
 */

html[data-hub-pastel="true"] {
  /* The hue slider changes only this value. */
  --hub-pastel-hue: 205;

  /* Current v260 surfaces still consume these base tokens. */
  --bg: var(--hub-theme-bg);
  --surface: var(--hub-theme-surface);
  --surface2: var(--hub-theme-surface-soft);
  --text: var(--hub-theme-text);
  --muted: var(--hub-theme-muted);
  --line: var(--hub-theme-line);
  --blue: var(--hub-theme-accent);
  --shadow: 0 16px 42px var(--hub-theme-shadow);
}

html[data-hub-pastel="true"]:not([data-dark="true"]) {
  color-scheme: light;

  /* Existing Hub v211 theme contract. */
  --hub-theme-bg: hsl(var(--hub-pastel-hue) 58% 97%);
  --hub-theme-surface: hsl(var(--hub-pastel-hue) 38% 99%);
  --hub-theme-surface-soft: hsl(var(--hub-pastel-hue) 55% 96%);
  --hub-theme-text: hsl(var(--hub-pastel-hue) 40% 20%);
  --hub-theme-muted: hsl(var(--hub-pastel-hue) 20% 38%);
  --hub-theme-line: hsl(var(--hub-pastel-hue) 34% 84%);
  --hub-theme-accent: hsl(var(--hub-pastel-hue) 62% 42%);
  --hub-theme-accent-strong: hsl(var(--hub-pastel-hue) 66% 25%);
  --hub-theme-accent-soft: hsl(var(--hub-pastel-hue) 72% 93%);
  --hub-theme-hero-start: hsl(var(--hub-pastel-hue) 46% 24%);
  --hub-theme-hero-middle: hsl(calc(var(--hub-pastel-hue) + 12) 48% 24%);
  --hub-theme-hero-end: hsl(calc(var(--hub-pastel-hue) + 26) 42% 24%);
  --hub-theme-hero-copy: #ffffff;
  --hub-theme-glow: hsl(var(--hub-pastel-hue) 78% 72% / .24);
  --hub-theme-shadow: hsl(var(--hub-pastel-hue) 38% 28% / .10);
  --hub-theme-focus: var(--hub-theme-accent-strong);
  --hub-pastel-highlight: rgba(255, 255, 255, .92);
  --hub-pastel-card-tint: hsl(var(--hub-pastel-hue) 74% 92%);
}

html[data-dark="true"][data-hub-pastel="true"] {
  color-scheme: dark;
  --hub-theme-bg: hsl(var(--hub-pastel-hue) 30% 8%);
  --hub-theme-surface: hsl(var(--hub-pastel-hue) 28% 12%);
  --hub-theme-surface-soft: hsl(var(--hub-pastel-hue) 30% 16%);
  --hub-theme-text: hsl(var(--hub-pastel-hue) 35% 96%);
  --hub-theme-muted: hsl(var(--hub-pastel-hue) 18% 76%);
  --hub-theme-line: hsl(var(--hub-pastel-hue) 24% 32%);
  --hub-theme-accent: hsl(var(--hub-pastel-hue) 62% 67%);
  --hub-theme-accent-strong: hsl(var(--hub-pastel-hue) 68% 85%);
  --hub-theme-accent-soft: hsl(var(--hub-pastel-hue) 38% 22%);
  --hub-theme-hero-start: hsl(var(--hub-pastel-hue) 42% 18%);
  --hub-theme-hero-middle: hsl(calc(var(--hub-pastel-hue) + 12) 44% 20%);
  --hub-theme-hero-end: hsl(calc(var(--hub-pastel-hue) + 26) 40% 22%);
  --hub-theme-hero-copy: #ffffff;
  --hub-theme-glow: hsl(var(--hub-pastel-hue) 68% 60% / .18);
  --hub-theme-shadow: rgba(0, 0, 0, .34);
  --hub-theme-focus: var(--hub-theme-accent-strong);
  --hub-pastel-highlight: rgba(255, 255, 255, .08);
  --hub-pastel-card-tint: hsl(var(--hub-pastel-hue) 38% 20%);
}

html[data-hub-pastel="true"]:not([data-dark="true"]) body.page-hub {
  background:
    radial-gradient(circle at 8% 4%, hsl(calc(var(--hub-pastel-hue) + 48) 84% 88% / .55), transparent 24rem),
    radial-gradient(circle at 94% 2%, hsl(var(--hub-pastel-hue) 88% 84% / .5), transparent 29rem),
    linear-gradient(180deg, var(--hub-theme-bg), hsl(var(--hub-pastel-hue) 55% 98%));
  color: var(--text);
}

html[data-dark="true"][data-hub-pastel="true"] body.page-hub {
  background:
    radial-gradient(circle at 8% 4%, hsl(calc(var(--hub-pastel-hue) + 48) 48% 28% / .23), transparent 24rem),
    radial-gradient(circle at 94% 2%, hsl(var(--hub-pastel-hue) 58% 30% / .24), transparent 29rem),
    linear-gradient(180deg, var(--hub-theme-bg), hsl(var(--hub-pastel-hue) 30% 7%));
  color: var(--text);
}

/* General non-semantic page chrome. */
html[data-hub-pastel="true"] .page-hub .topbar,
html[data-hub-pastel="true"] .page-hub .news-board,
html[data-hub-pastel="true"] .page-hub .hub-command-dashboard-v228,
html[data-hub-pastel="true"] .page-hub .hub-company-dashboard-v245,
html[data-hub-pastel="true"] .page-hub .hub-department-floor-v228,
html[data-hub-pastel="true"] .page-hub .hub-owner-dashboard-v258 {
  border-color: var(--line);
  background:
    linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface2) 78%, var(--surface)));
  box-shadow:
    0 16px 42px var(--hub-theme-shadow),
    inset 0 1px 0 var(--hub-pastel-highlight);
}

html[data-hub-pastel="true"] .page-hub .hub-command-dashboard-v228::before {
  opacity: .22;
}

html[data-hub-pastel="true"] .page-hub .topbar {
  backdrop-filter: blur(14px);
}

html[data-hub-pastel="true"] .page-hub .eyebrow,
html[data-hub-pastel="true"] .page-hub .brand small,
html[data-hub-pastel="true"] .page-hub .section-heading .eyebrow {
  color: var(--hub-theme-accent-strong);
}

html[data-hub-pastel="true"] .page-hub .ghost,
html[data-hub-pastel="true"] .page-hub .hub-command-head-actions-v229 button,
html[data-hub-pastel="true"] .page-hub #hub-company-refresh-v245,
html[data-hub-pastel="true"] .page-hub #hub-department-view-toggle-v228,
html[data-hub-pastel="true"] .page-hub .hub-owner-controls-v258 button,
html[data-hub-pastel="true"] .page-hub .hub-shortcuts-open-v257 {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 6px 18px var(--hub-theme-shadow);
}

html[data-hub-pastel="true"] .page-hub :is(
  .hub-command-priority-v228,
  .hub-command-pipeline-v228,
  .hub-company-filters-v245,
  .hub-command-history-v239 .shipping-daily-summary
) {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 92%, var(--hub-theme-accent-soft));
}

html[data-hub-pastel="true"] .page-hub :is(
  .hub-command-pipeline-list-v228 > button,
  .hub-company-filters-v245 input,
  .hub-company-filters-v245 select,
  .hub-shortcut-row-v257
) {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

html[data-hub-pastel="true"] .page-hub :is(
  .hub-command-pipeline-list-v228 > button,
  .hub-shortcut-row-v257
):hover {
  border-color: var(--hub-theme-accent);
  background: color-mix(in srgb, var(--surface) 82%, var(--hub-theme-accent-soft));
}

/* Decorative card accents remain distinct without changing status meaning. */
html[data-hub-pastel="true"] .page-hub .primary-card:not(.primary-adpilot) {
  --bright-card-surface: color-mix(in srgb, var(--surface) 76%, var(--hub-pastel-card-tint));
  border-color: color-mix(in srgb, var(--bright-card-accent) 24%, var(--line));
  background: linear-gradient(145deg, var(--surface) 40%, var(--bright-card-surface));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--bright-card-accent) 12%, transparent);
}

html[data-hub-pastel="true"] .page-hub .secondary-grid > a {
  border-color: color-mix(in srgb, var(--tool-color) 22%, var(--line));
  background: linear-gradient(135deg, var(--surface) 44%, color-mix(in srgb, var(--surface) 88%, var(--tool-color)));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--tool-color) 9%, transparent);
}

/* Dialogs and drawers use the same calm neutral surfaces. */
html[data-hub-pastel="true"] :is(
  .hub-theme-panel,
  .news-dialog,
  .hub-shortcuts-panel-v257,
  .hub-drawer-panel-v257
) {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

html[data-hub-pastel="true"] :is(
  .hub-theme-option-card,
  .hub-theme-mode,
  .hub-shortcuts-search-wrap-v257,
  .hub-drawer-head-v257
) {
  border-color: var(--line);
  background: var(--surface2);
}

/* Accessible prototype controls inserted into the existing theme dialog. */
.hub-pastel-control-preview {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--hub-theme-line, var(--line));
  border-radius: 17px;
  background: var(--hub-theme-surface-soft, var(--surface2));
  color: var(--hub-theme-text, var(--text));
}

.hub-pastel-control-preview > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.hub-pastel-control-preview h3,
.hub-pastel-control-preview p {
  margin: 0;
}

.hub-pastel-control-preview h3 {
  font-size: 16px;
}

.hub-pastel-control-preview p,
.hub-pastel-control-preview output {
  color: var(--hub-theme-muted, var(--muted));
  font-size: 12px;
  line-height: 1.5;
}

.hub-pastel-control-preview label {
  display: grid;
  gap: 9px;
  font-size: 13px;
  font-weight: 900;
}

.hub-pastel-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.hub-pastel-presets [data-hue="168"] { --hub-preset-hue: 168; }
.hub-pastel-presets [data-hue="205"] { --hub-preset-hue: 205; }
.hub-pastel-presets [data-hue="270"] { --hub-preset-hue: 270; }
.hub-pastel-presets [data-hue="338"] { --hub-preset-hue: 338; }
.hub-pastel-presets [data-hue="28"] { --hub-preset-hue: 28; }

.hub-pastel-control-preview [data-hub-pastel-preset] {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 9px;
  text-align: left;
}

.hub-pastel-control-preview [data-hub-pastel-preset] > span:last-child {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-pastel-preset-dot {
  width: 18px;
  height: 18px;
  border: 2px solid var(--hub-theme-surface, var(--surface));
  border-radius: 50%;
  background: hsl(var(--hub-preset-hue) 68% 62%);
  box-shadow: 0 0 0 1px var(--hub-theme-line, var(--line));
}

.hub-pastel-control-preview [data-hub-pastel-preset][aria-pressed="true"] {
  border-color: var(--hub-theme-accent-strong);
  background: var(--hub-theme-accent-soft);
  color: var(--hub-theme-accent-strong);
}

.hub-pastel-control-preview input[type="range"] {
  width: 100%;
  height: 44px;
  margin: 0;
  cursor: pointer;
  accent-color: hsl(var(--hub-pastel-hue, 205) 68% 43%);
}

.hub-pastel-control-preview input[type="range"]::-webkit-slider-runnable-track {
  height: 14px;
  border: 1px solid rgba(20, 40, 68, .14);
  border-radius: 999px;
  background: linear-gradient(90deg, #e79aaa, #efca91, #a6ddba, #9edee2, #a8bdec, #c9a7e7, #e79aaa);
}

.hub-pastel-control-preview input[type="range"]::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -8px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: hsl(var(--hub-pastel-hue, 205) 68% 43%);
  box-shadow: 0 2px 8px rgba(20, 40, 68, .28);
  appearance: none;
}

.hub-pastel-control-preview input[type="range"]::-moz-range-track {
  height: 14px;
  border: 1px solid rgba(20, 40, 68, .14);
  border-radius: 999px;
  background: linear-gradient(90deg, #e79aaa, #efca91, #a6ddba, #9edee2, #a8bdec, #c9a7e7, #e79aaa);
}

.hub-pastel-control-preview input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: hsl(var(--hub-pastel-hue, 205) 68% 43%);
  box-shadow: 0 2px 8px rgba(20, 40, 68, .28);
}

.hub-pastel-control-preview button {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--hub-theme-line, var(--line));
  border-radius: 11px;
  background: var(--hub-theme-surface, var(--surface));
  color: var(--hub-theme-text, var(--text));
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.hub-pastel-control-preview :focus-visible {
  outline: 3px solid var(--hub-theme-focus, #1769c2);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .hub-pastel-control-preview > header {
    display: grid;
  }

  .hub-pastel-control-preview button {
    width: 100%;
  }

  .hub-pastel-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .page-hub .topbar .top-actions > .ghost.hub-theme-open {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-hub-pastel="true"] .page-hub :is(
    .primary-card,
    .secondary-grid > a,
    .hub-command-pipeline-list-v228 > button,
    .hub-shortcut-row-v257
  ) {
    transition: none;
  }
}