/* Creo Hub shell palette, shared with creo-hub.com.
   UI only: never target canvas, video, iframe, scene/overlay roots or templates.
   Semantic QC/decision/metric colors and product/Facebook marks stay intact. */
body[data-hub-theme] {
  --hub-bg: #121411;
  --hub-panel: #1a1e17;
  --hub-card: #20251c;
  --hub-hover: #2b3224;
  --hub-border: #33392e;
  --hub-border-strong: #505b43;
  --hub-text: #f2f3e9;
  --hub-muted: #a8afa2;
  --hub-dim: #c5cbbb;
  --hub-accent: #d7fc70;
  --hub-accent-hover: #e6ffa4;
  --hub-on-accent: #18210c;
  --hub-tint: rgba(215, 252, 112, .10);
  --hub-accent-border: rgba(215, 252, 112, .38);
  --hub-focus: 0 0 0 3px rgba(215, 252, 112, .22);
  background: var(--hub-bg);
  color: var(--hub-text);
}

/* Bridge existing UI tokens only. Do not change --primary-blue or other
   product-screen tokens from the original creative renderer. */
body[data-hub-theme="workspace"] {
  --bg-app: var(--hub-bg);
  --bg-rail: var(--hub-bg);
  --bg-sub: var(--hub-panel);
  --bg-panel: var(--hub-panel);
  --bg-card: var(--hub-card);
  --bg-hover: var(--hub-hover);
  --line: var(--hub-border);
  --line-strong: var(--hub-border-strong);
  --txt: var(--hub-text);
  --txt-dim: var(--hub-dim);
  --txt-mute: var(--hub-muted);
  --txt-soft: var(--hub-muted);
  --accent: var(--hub-accent);
  --accent-soft: var(--hub-accent-hover);
  --ui-border: var(--hub-border);
  --ui-border-strong: var(--hub-border-strong);
  --ui-surface: var(--hub-card);
  --ui-surface-hover: var(--hub-hover);
  --ui-text: var(--hub-text);
  --ui-muted: var(--hub-muted);
  --ui-accent: var(--hub-accent);
  --ui-focus: var(--hub-focus);
}

/* Primary actions: dark ink is essential on the light lime surface.
   !important matches the existing canonical ui-system button rules. */
body[data-hub-theme="workspace"] :is(
  .ui-btn-primary, .pubBtn-main, .fmtAdd-hot, .cxVarAdd, .createEmptyAction,
  .scr-btn:not(.scr-sec), .doBtn-fb, .tlZoomFit.tlAddBtn, .psBtnPrimary,
  #vcGalleryOverlay .qz-btn-primary, #cxTlPanel .doBtn-fb,
  .gdNewCreative, .gdContinue .gdQuick .gdResume,
  .gdContinue .gdRecent.is-lead .gdQuick button:first-child,
  .tlPlayBtn, .sbYes, .ctBtn.primary, .fmtEmptyBtn, .cxFxEdBtn.primary,
  .cxAdCopySave, .cxCtaFoot .main, .scr-chip.scr-active,
  #leftNav .lnav-btn[data-group="create"]
) {
  background: var(--hub-accent) !important;
  border-color: var(--hub-accent) !important;
  color: var(--hub-on-accent) !important;
  box-shadow: 0 4px 16px rgba(215, 252, 112, .12) !important;
}
body[data-hub-theme="workspace"] :is(
  .ui-btn-primary, .pubBtn-main, .fmtAdd-hot, .cxVarAdd, .createEmptyAction,
  .scr-btn:not(.scr-sec), .doBtn-fb, .tlZoomFit.tlAddBtn, .psBtnPrimary,
  #vcGalleryOverlay .qz-btn-primary, #cxTlPanel .doBtn-fb,
  .gdNewCreative, .gdContinue .gdQuick .gdResume,
  .gdContinue .gdRecent.is-lead .gdQuick button:first-child,
  .tlPlayBtn, .sbYes, .ctBtn.primary, .fmtEmptyBtn, .cxFxEdBtn.primary,
  .cxAdCopySave, .cxCtaFoot .main, .scr-chip.scr-active,
  #leftNav .lnav-btn[data-group="create"]
):hover:not(:disabled) {
  background: var(--hub-accent-hover) !important;
  border-color: var(--hub-accent-hover) !important;
  color: var(--hub-on-accent) !important;
}
body[data-hub-theme="workspace"] #leftNav .lnav-btn[data-group="create"] svg {
  color: var(--hub-on-accent);
}
body[data-hub-theme="workspace"] :is(#subNavFab, .rwCard-on .rwCardTag,
  .cxStaticLocaleTab.on) { background: var(--hub-accent); color: var(--hub-on-accent); box-shadow: none; }
body[data-hub-theme="workspace"].subnav-open #subNavFab { background: transparent; color: var(--hub-text); }
body[data-hub-theme="workspace"] #appSwitchIco { color: var(--hub-on-accent) !important; }
body[data-hub-theme="workspace"] .cxPreviewFill { background: var(--hub-accent); }
body[data-hub-theme="workspace"] .cxPreviewPlay:hover {
  background: var(--hub-accent); color: var(--hub-on-accent); border-color: var(--hub-accent);
  box-shadow: 0 10px 26px rgba(0,0,0,.46), 0 0 0 4px var(--hub-tint);
}
body[data-hub-theme="workspace"] #vcGalleryOverlay .vcGalToolbar { background: var(--hub-panel) !important; }
body[data-hub-theme="workspace"] :is(.rwCard-on, .rwTab-on) {
  background: var(--hub-tint) !important; color: var(--hub-accent) !important; border-color: var(--hub-accent-border);
}
body[data-hub-theme="workspace"] :is(.rwCard-on b, .rwCard-on span, .ddOpt-on,
  .tplCard-on .tplTxt b, .asCard-on .asTxt b, .fmtShowcaseBtn b) { color: var(--hub-accent); }
body[data-hub-theme="workspace"] .cxTypeBtn {
  background: var(--hub-card); border-color: var(--hub-border); color: var(--hub-dim);
}
body[data-hub-theme="workspace"] .cxTypeBtn[data-manual="1"] {
  background: var(--hub-tint); border-color: var(--hub-accent-border); color: var(--hub-accent);
}
body[data-hub-theme="workspace"] .tlZoomRange::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--hub-accent) 0 var(--tl-zoom-pct), var(--hub-border) var(--tl-zoom-pct) 100%);
}
body[data-hub-theme="workspace"] .tlZoomRange::-webkit-slider-thumb {
  border-color: var(--hub-accent); background: var(--hub-on-accent);
  box-shadow: 0 2px 7px rgba(0,0,0,.55), 0 0 0 2px var(--hub-tint);
}
body[data-hub-theme="workspace"] .tlZoomRange:hover::-webkit-slider-thumb,
body[data-hub-theme="workspace"] .tlZoomRange:focus-visible::-webkit-slider-thumb { box-shadow: var(--hub-focus); }
body[data-hub-theme="workspace"] .tlZoomRange::-moz-range-track { background: var(--hub-border); }
body[data-hub-theme="workspace"] .tlZoomRange::-moz-range-progress { background: var(--hub-accent); }
body[data-hub-theme="workspace"] .tlZoomRange::-moz-range-thumb {
  border-color: var(--hub-accent); background: var(--hub-on-accent); box-shadow: var(--hub-focus);
}
body[data-hub-theme="workspace"] :is(#rwFooter .rwfBar, .jobBar i) {
  background: linear-gradient(90deg, var(--hub-accent), var(--hub-accent-hover));
}
body[data-hub-theme="workspace"] :is(.lnav-btn.lnav-active, .lnav-active svg,
  .sub-btn.sub-active span, .asPicked) { color: var(--hub-accent); }
body[data-hub-theme="workspace"] :is(.lnav-btn.lnav-active,
  #subNav .sub-btn.fmtCard.sub-active, .sub-btn.sub-active) {
  background: var(--hub-tint); border-color: var(--hub-accent-border);
}
body[data-hub-theme="workspace"] :is(.lnav-btn.lnav-active, .sub-btn.sub-active)::before {
  background: var(--hub-accent);
}
body[data-hub-theme="workspace"] :is(.rwChip-on, .fmtViewBtn.on, .fmtTypeBtn.on,
  .fmtDurationBtn.on, .fmtSortOption.on, .fmtLocaleOption.on, .fmtAngleOption.on,
  .fmtLocalePill.on, .psTab.on, .slFilter.on, .revTab.on, .asTab-on) {
  background: var(--hub-tint); color: var(--hub-accent);
  border-color: var(--hub-accent-border); box-shadow: none;
}
body[data-hub-theme="workspace"] :is(.fmtLocaleOption.on .fmtLocaleCode,
  .fmtAngleOption.on .fmtAngleIcon) {
  background: var(--hub-accent); color: var(--hub-on-accent); box-shadow: none;
}
body[data-hub-theme="workspace"] :is(.fmtTypeBtn.on .fmtTypeCount,
  .fmtDurationBtn.on .fmtDurationCount) { background: var(--hub-tint); color: var(--hub-accent); }
body[data-hub-theme="workspace"] .cxVarCard.cxVar-on { border-color: var(--hub-accent); }

/* Workspace/dashboard surfaces; no universal descendant background rule. */
body[data-hub-theme="workspace"] :is(#dashboardCenter, #screenLibraryCenter,
  #productCenter, #cxCenter.cxLibraryModal, #cxCenter.cxDashboardModal) {
  background: var(--hub-bg); color: var(--hub-text);
}
body[data-hub-theme="workspace"] #cxCenter { background: var(--hub-bg) !important; }
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdWorkspaceBlock, .gdPanel,
  .gdMetric, .gdSignals article, .gdProduct, .gdDecision, .gdRecent, .gdProductRail,
  .gdWinnerCard, .gdFunnelStep, .gdCostGrid>div, .gdNextGrid>div,
  .gdQueueSummary, .gdProductScope, .gdSearch, .gdPeriod, .gdViews,
  .gdResultProductMenu, .gdSearchResults) {
  background: var(--hub-panel); border-color: var(--hub-border);
}
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdWorkspaceNavRow,
  .gdWorkspaceSectionHead, .gdWinnerStats, .gdWinnerStats>span) { border-color: var(--hub-border); }
body[data-hub-theme="workspace"] #dashboardCenter .gdActivityRow { border-color: var(--hub-border) !important; }
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdWorkspaceFunnel .gdFunnel,
  .gdFunnelStep>em, .gdWinnerStats>span) { background: var(--hub-bg); }
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdWorkspaceBrand h1,
  .gdSearch input, .gdResultProductMenu>header b) { color: var(--hub-text); }
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdWorkspaceBrand p,
  .gdWorkspaceSectionHead p, .gdWorkspaceTabs button,
  .gdProductScope small, .gdQueueSummary small, .gdProductRailBody small,
  .gdProductRailBody em, .gdFunnelHint, .gdRecentMeta, .gdUpdated,
  .gdWinnerStats small, .gdWinnerCompactFoot, .gdDecisionPeriod) { color: var(--hub-muted); }
body[data-hub-theme="workspace"] #dashboardCenter .gdSearch input::placeholder { color: var(--hub-muted); }
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdCatalogTools,
  .gdCatalogMenu, .gdCatalogAngleHead, .gdCatalogBack, .gdCatalogLayout,
  .gdCatalogLocales, .gdCatalogVersions, .gdCatalogHeadActions>b, .gdCatalogMore) {
  background: var(--hub-panel); border-color: var(--hub-border); color: var(--hub-dim);
}
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdCatalogTools input,
  .gdCatalogMenuButton, .gdCatalogReset) {
  background: var(--hub-card); border-color: var(--hub-border); color: var(--hub-text);
}
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdCatalogMenuLead,
  .gdCatalogMenuItemIcon, .gdCatalogHead h1) { color: var(--hub-text); }
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdCatalogHead p,
  .gdCatalogFieldLabel, .gdCatalogTools label>span, .gdCatalogAngleHead small) { color: var(--hub-muted); }
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdCatalogGroupToggle.on,
  .gdCatalogAngleMark, .gdCatalogAngleHead>b, .gdCatalogGroupToggle.on>b,
  .gdCatalogGenericIcon, .gdCatalogMenuItem.on,
  .gdCatalogDropdown.open .gdCatalogMenuButton, .gdCatalogDropdown.has-value .gdCatalogMenuButton) {
  background: var(--hub-tint); border-color: var(--hub-accent-border); color: var(--hub-accent); box-shadow: none;
}
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdCatalogLayout button.on,
  .gdCatalogLocales button.on, .gdCatalogVersions button.on) {
  background: var(--hub-accent); color: var(--hub-on-accent); box-shadow: none;
}
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdCatalogBack,
  .gdCatalogMenuButton, .gdCatalogMenuItem, .gdCatalogReset, .gdCatalogMore):hover {
  background: var(--hub-hover); border-color: var(--hub-accent-border); color: var(--hub-text);
}
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdCatalogTools input,
  .gdCatalogMenuButton, .gdCatalogMenuItem, .gdCatalogLayout button,
  .gdCatalogLocales button, .gdCatalogVersions button):focus-visible {
  outline: 2px solid var(--hub-accent); outline-offset: 2px; box-shadow: var(--hub-focus);
}
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdWorkspaceTabs button.on,
  .gdPeriod button.on, .gdViews button.on, .gdResultProductTrigger,
  .gdResultProductMenu>header button, .gdRecentShare) {
  background: var(--hub-tint); color: var(--hub-accent);
  border-color: var(--hub-accent-border); box-shadow: none;
}
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdResultProductTrigger>i:first-child,
  .gdResultProductOption:not(.off)>em, .gdKicker, .gdRecentApp,
  .gdWinnerProduct, .gdProductRail:hover .gdProductRailArrow) { color: var(--hub-accent); }
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdRecent:hover,
  .gdProductRail:hover, .gdWinnerCard:hover, .gdQueueSummary:hover,
  .gdProductScope:hover, .gdTodayRow:hover, .gdResultProductOption:hover,
  .gdResultProductTrigger:hover, .gdQuick button:hover) {
  background: var(--hub-hover); border-color: var(--hub-accent-border);
}
body[data-hub-theme="workspace"] #dashboardCenter .gdContinue .gdRecent.is-lead {
  border-color: var(--hub-accent-border); box-shadow: 0 0 0 1px var(--hub-tint);
}
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdQuick button,
  .gdRefresh, .gdSystemLink, .gdDecisionPeriod, .gdSearch kbd) {
  background: var(--hub-card); border-color: var(--hub-border); color: var(--hub-dim);
}
body[data-hub-theme="workspace"] #dashboardCenter :is(.gdQueueBar i,
  .gdWinnerGoal i, .gdWorkspaceFunnel .gdFunnel>.gdFunnelStep>.gdFunnelBar) {
  background: var(--hub-accent);
}
/* Keep the four decision colors, including the blue Test state. */
body[data-hub-theme="workspace"] #dashboardCenter .gdResultsDecisions .gdDecision header {
  background: linear-gradient(90deg, rgba(var(--decision-rgb), .08), var(--hub-panel) 28%);
  border-color: var(--hub-border);
}

/* Editor dialogs/library/task chrome, without touching the actual stage. */
body[data-hub-theme="workspace"] :is(.slCard, .psCard, .psTabs, .pubBox, .locBox,
  .showcaseBox, .ctDrawer, .ctComposer, .ctCard, .ctContext, .cxHeadIcons,
  .tlZoom, .doBar, .cxAdCopy,
  .fmtMenu, .fmtSortMenu, .fmtToolPanel, .cxEditorCtx, .ui-toolbar) {
  background: var(--hub-panel); border-color: var(--hub-border); color: var(--hub-text);
}
body[data-hub-theme="workspace"] :is(.tlWrap, #cxTlPanel) {
  background: var(--hub-panel) !important; border-color: var(--hub-border) !important;
}
body[data-hub-theme="workspace"] .tlLaneBg {
  background: var(--hub-card) !important; border-color: var(--hub-border) !important;
}
body[data-hub-theme="workspace"] :is(.ctInput, .ctSelect, .ctTextarea, .ctChip,
  .ctResult, .ctBtn:not(.primary):not(.good):not(.bad), .cxVarNav button) {
  background: var(--hub-card); border-color: var(--hub-border); color: var(--hub-text);
}
body[data-hub-theme="workspace"] :is(.ctContextBtn.primary, .ctChip.time) {
  background: var(--hub-tint); color: var(--hub-accent);
}
body[data-hub-theme="workspace"] .ctCapture input { accent-color: var(--hub-accent); }
body[data-hub-theme="workspace"] .ctCard.selected { box-shadow: var(--hub-focus); }
body[data-hub-theme="workspace"] #hubBootCover { background: var(--hub-bg); color: var(--hub-text); }
body[data-hub-theme="workspace"] #hubBootCover .hubBootTrack::after { background: var(--hub-accent); }

/* Accessible focus on shell controls only, including controls with outline:0. */
body[data-hub-theme="workspace"] :is(.gdNewCreative, .gdWorkspaceTabs button,
  .gdPeriod button, .gdViews button, .gdResultProductTrigger, .gdRecent,
  .ctInput, .ctSelect, .ctTextarea, .ctBtn, .lnav-btn, .sub-btn,
  .fmtTypeBtn, .fmtSortOption, .cxVarCard, .ui-btn, .pubBtn, .fmtAdd,
  .cxVarAdd, .doBtn, .tlZoomFit, .psBtn, .cxPreviewPlay):focus-visible {
  outline: 2px solid var(--hub-accent); outline-offset: 3px;
}
body[data-hub-theme="workspace"] #dashboardCenter .gdSearch:focus-within {
  border-color: var(--hub-accent); box-shadow: var(--hub-focus);
}

/* Public watch page: transport/actions only. Scene frame stays black and
   HTML overlay frames keep their own independent CSS. */
body[data-hub-theme="watch"] :is(.sub, .time, .note, .varsLbl, .err) { color: var(--hub-muted); }
body[data-hub-theme="watch"] :is(.seek, .mute, .btn, .var) {
  background: var(--hub-panel); border-color: var(--hub-border); color: var(--hub-text);
}
body[data-hub-theme="watch"] :is(.seek, .mute, .btn, .var):hover {
  background: var(--hub-hover); border-color: var(--hub-border-strong);
}
body[data-hub-theme="watch"] :is(.play, .btn-main, .var.on) {
  background: var(--hub-accent); border-color: var(--hub-accent); color: var(--hub-on-accent);
}
body[data-hub-theme="watch"] :is(.play, .btn-main, .var.on):hover { background: var(--hub-accent-hover); }
body[data-hub-theme="watch"] .fill { background: var(--hub-accent); }
body[data-hub-theme="watch"] .track { background: var(--hub-border); }
body[data-hub-theme="watch"] :is(.play, .seek, .mute, .btn, .var, .soundGate):focus-visible {
  outline: 2px solid var(--hub-accent); outline-offset: 3px;
}

/* Showcase: restrained lime/olive light instead of the old blue/purple wash. */
body[data-hub-theme="showcase"] {
  --bg: var(--hub-bg); --panel: var(--hub-panel); --line: var(--hub-border);
  --text: var(--hub-text); --muted: var(--hub-muted);
  background: radial-gradient(900px 520px at 8% -8%, rgba(215,252,112,.08), transparent 60%), var(--hub-bg);
}
body[data-hub-theme="showcase"] :is(.brand, .tabIndicator, .localePill.on, .viewerLocalePill.on) {
  background: var(--hub-accent); color: var(--hub-on-accent);
  border-color: var(--hub-accent); box-shadow: none;
}
body[data-hub-theme="showcase"] .tab.on { color: var(--hub-on-accent); }
body[data-hub-theme="showcase"] :is(.eyebrow, .app) { color: var(--hub-accent); }
body[data-hub-theme="showcase"] .eyebrow::before { background: var(--hub-accent); }
body[data-hub-theme="showcase"] :is(.controls, .viewerPanel, .viewerLoader) { background: var(--hub-panel); }
body[data-hub-theme="showcase"] :is(.search, .sort, .tabs) {
  background: var(--hub-bg); border-color: var(--hub-border); color: var(--hub-text);
}
body[data-hub-theme="showcase"] .card:hover { border-color: var(--hub-accent-border); }
body[data-hub-theme="showcase"] .viewerLoaderSpinner { border-top-color: var(--hub-accent); }
body[data-hub-theme="showcase"] :is(.search, .sort, .tab, .share, .card,
  .localePill, .viewerLocalePill, .viewerNav, .close, .external):focus-visible {
  outline: 2px solid var(--hub-accent); outline-offset: 3px; box-shadow: var(--hub-focus);
}

/* Access gate uses the same brand, without exposing any workspace data. */
body[data-hub-theme="login"] form { background: var(--hub-panel); border-color: var(--hub-border); }
body[data-hub-theme="login"] input { background: var(--hub-bg); border-color: var(--hub-border); color: var(--hub-text); }
body[data-hub-theme="login"] button { background: var(--hub-accent); color: var(--hub-on-accent); }
body[data-hub-theme="login"] button:hover { background: var(--hub-accent-hover); }
body[data-hub-theme="login"] :is(input, button):focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 3px; }