/*
 * Clipbank's semantic bridge to the unmodified StyleDock themeVars contract.
 * Keep --sd-* Studio geometry out of this layer. Colors below are only startup
 * fallbacks; all selected packs supply the canonical --p-* values at the root.
 */
:root {
  color-scheme: var(--p-color-scheme, light);
  --cb-bg: var(--p-background, #f7f8f4);
  --cb-surface: var(--p-surface, #ffffff);
  --cb-raised: var(--p-raised, var(--cb-surface));
  --cb-inset: var(--p-inset, #edf1e9);
  --cb-spotlight: var(--p-spotlight, #e8eee5);
  --cb-on-spotlight: var(--p-on-spotlight, var(--cb-text));
  --cb-spotlight-muted: var(--p-spotlight-muted, var(--cb-muted));
  --cb-text: var(--p-text, #344740);
  --cb-heading: var(--p-text, #243b35);
  --cb-muted: var(--p-muted, #697b70);
  --cb-border: var(--p-border, #dce4d8);
  --cb-border-strong: var(--p-border-strong, #b8cbb8);
  --cb-primary: var(--p-primary, #3c6e65);
  --cb-on-primary: var(--p-onPrimary, #ffffff);
  --cb-link: var(--p-link, var(--cb-primary));
  --cb-primary-hover: var(--cb-primary);
  --cb-primary-soft: color-mix(in srgb, var(--cb-primary) 10%, var(--cb-surface));
  --cb-accent: var(--p-accent, #ab8a57);
  --cb-on-accent: var(--p-on-accent, var(--cb-text));
  --cb-accent-soft: color-mix(in srgb, var(--cb-accent) 12%, var(--cb-surface));
  --cb-selected: var(--p-selected, #e5eee4);
  --cb-on-selected: var(--p-on-selected, var(--cb-link));
  --cb-hover: color-mix(in srgb, var(--cb-primary) 7%, var(--cb-surface));
  --cb-focus: var(--p-focus, var(--cb-primary));
  --cb-success: var(--p-success, #39765b);
  --cb-success-ink: color-mix(in srgb, var(--cb-success) 58%, var(--cb-text));
  --cb-success-soft: color-mix(in srgb, var(--cb-success) 11%, var(--cb-surface));
  --cb-warning: var(--p-warning, #9b733c);
  --cb-warning-ink: color-mix(in srgb, var(--cb-warning) 58%, var(--cb-text));
  --cb-warning-soft: color-mix(in srgb, var(--cb-warning) 12%, var(--cb-surface));
  --cb-danger: var(--p-danger, #a4483c);
  --cb-on-danger: var(--p-on-danger, #ffffff);
  --cb-danger-ink: color-mix(in srgb, var(--cb-danger) 70%, var(--cb-text));
  --cb-danger-soft: color-mix(in srgb, var(--cb-danger) 10%, var(--cb-surface));
  --cb-info: var(--p-data-accent, var(--cb-accent));
  --cb-info-ink: color-mix(in srgb, var(--cb-info) 58%, var(--cb-text));
  --cb-info-soft: color-mix(in srgb, var(--cb-info) 11%, var(--cb-surface));
  --cb-data-primary: var(--p-data-primary, var(--cb-primary));
  --cb-data-accent: var(--p-data-accent, var(--cb-accent));
  --cb-pack: var(--cb-warning-ink);
  --cb-pack-soft: var(--cb-warning-soft);
  --cb-combo: var(--cb-info-ink);
  --cb-combo-soft: var(--cb-info-soft);
  --cb-inverse: var(--cb-text);
  --cb-on-inverse: var(--cb-bg);
  --cb-preview-surface: var(--cb-inset);
  --cb-overlay-ink: #102019;
  --cb-shadow-ink: #102019;
  --cb-shadow: var(--p-shadow, 0 14px 42px #1d392e12);
  --cb-text-shadow: none;
  --cb-font: var(--p-font, Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
  --cb-heading-font: var(--p-heading-font, var(--cb-font));
  --cb-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Microsoft YaHei", monospace;
  --cb-heading-weight: var(--p-weight, 650);
  --cb-font-size: var(--p-font-size, 14px);
  /* Clipbank's authored baseline is 14px. Native StyleDock scales are /16. */
  --cb-type-scale: calc(var(--sd-type-scale, .875) * 8 / 7);
  --cb-heading-scale: var(--sd-heading-scale, 1);
  --cb-leading-scale: calc(var(--p-line-height, 1.6) / 1.6);
  --cb-radius: var(--p-radius, 12px);
  --cb-radius-sm: min(6px, var(--cb-radius));
  --cb-border-width: var(--p-border-width, 1px);
  --cb-space: var(--p-gap, 20px);
  /* Tool chrome follows density within the bounds of measured editor rows. */
  --cb-editor-space: clamp(16px, var(--p-gap, 20px), 24px);
  --cb-motion: var(--p-motion, 160ms);
  --cb-scroll-behavior: smooth;
  /* Coordinate axes retain their meaning across themes and match scene axes. */
  --cb-axis-x: #a75d55;
  --cb-axis-y: #527b46;
  --cb-axis-z: #4c7598;
}

h1, h2, h3, h4, h5, h6, [role="heading"] {
  font-family: var(--cb-heading-font);
}

/* Prop labels must accommodate larger type and translated text without
 * changing the scene, dock widths, or timeline geometry. */
#sidebar .primary-nav {
  overflow-x: hidden;
}

#sidebar .primary-nav a {
  height: auto;
  min-height: 42px;
  flex-shrink: 0;
  line-height: 1.35;
  padding-block: calc(var(--cb-space) * .25);
}

#sidebar .primary-nav a > span:nth-child(2) {
  min-width: 0;
  flex: 1;
  white-space: normal;
  overflow-wrap: break-word;
}

#sidebar .primary-nav .nav-symbol {
  flex-shrink: 0;
}

.motion-prop-panel .mpp-panel > summary {
  flex-wrap: wrap;
}

.motion-prop-panel .mpp-panel > summary > span:first-child {
  white-space: nowrap;
}

.motion-prop-panel .mpp-size {
  display: flex;
  flex-wrap: wrap;
  white-space: normal;
}

.motion-prop-panel .mpp-size > input[type="number"] {
  flex: 0 0 72px;
  width: 72px;
  max-width: 100%;
}

.motion-prop-panel .mpp-size > input[type="range"] {
  flex: 1 1 96px;
  min-width: 60px;
  width: auto;
}

.motion-prop-panel .mpp-bone > label {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  white-space: normal;
}

.motion-prop-panel .mpp-bone select {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.motion-prop-panel .mpp-bone > button {
  max-width: 100%;
  white-space: normal;
}

.motion-prop-panel .mpp-vector {
  grid-template-columns: max-content repeat(3, minmax(0, 1fr));
}

.motion-prop-panel .mpp-vector > label {
  grid-template-columns: max-content minmax(0, 1fr);
}

.motion-prop-panel .sd-dock-position {
  width: max(59px, calc(6ch + 22px));
  min-width: 59px;
  height: auto;
}

:root[data-styledock-tone="dark"] {
  --cb-axis-x: #e79b90;
  --cb-axis-y: #a5cc91;
  --cb-axis-z: #9dc7e9;
}

/* This SVG contains a fixed dark wordmark. Only the UI brand mark gets a
 * light monochrome treatment; asset previews and photographs are untouched. */
:root[data-styledock-tone="dark"] :is(
  .brand img[src$="/logo.svg"], .marketing-footer > img[src$="/logo.svg"]
) {
  filter: brightness(0) invert(1);
}

/* Reference illustrations remain intact on dark paper. Actual camera/model
 * output and user-set scene colors are never tinted or inverted by a theme. */
:root[data-styledock-tone="dark"] :is(
  .hero-character > img, .project-preview img, .banner-figures img,
  .image-open img, .motion-preview img, .selected-template img, .detail-image img,
  .marketing-hero-art > img, .showcase-lineup img, .v08-rig-visual img,
  .v10-template-preview img, .co-hero-person, .co-product-image > img,
  .co-detail-preview > img, .co-library-image > img, .co-checkout-asset > img,
  .co-shop-product > img, .sd-picker-image img, .home-resume > img,
  .op-rig-thumbnail img, .cm-reference-stage img, .wb-reference-thumbs img,
  .wb-reference-canvas > .wb-reference-image, .wb-reference-mirror,
  .wb-reference-mirror > img, .sk-mannequin-background
) {
  mix-blend-mode: normal;
}

html[data-styledock-motion-effective="off"] {
  --cb-motion: 0ms;
  --cb-scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cb-motion: 0ms;
    --cb-scroll-behavior: auto;
  }
}