@layer hcc-light-contract {
/*
 * HCC operator light-mode contract. Every rule requires BOTH an operator route
 * and light mode. Root tokens also reach Radix portals without a theme effect,
 * localStorage mutation, or changes to public Client Hub / report pages.
 * Dark mode deliberately has no declarations in this file.
 */
:root:not(.dark):has([data-hcc-theme-scope]) {
  color-scheme: light;
  --background: 210 20% 96% !important;
  --foreground: 204 65% 15% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 204 65% 15% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 204 65% 15% !important;
  --primary: 30 99% 47% !important;
  --primary-foreground: 204 65% 15% !important;
  --secondary: 204 65% 15% !important;
  --secondary-foreground: 0 0% 100% !important;
  --muted: 204 20% 95% !important;
  --muted-foreground: 205 17% 39% !important;
  --accent: 204 20% 95% !important;
  --accent-foreground: 204 65% 15% !important;
  --border: 205 18% 87% !important;
  --input: 207 12% 54% !important;
  --ring: 23 100% 37% !important;
  --hcc-canvas: #f3f5f7 !important;
  --hcc-paper: #ffffff !important;
  --hcc-soft: #f0f3f5 !important;
  --hcc-ink: #0d2a3d !important;
  --hcc-muted: #526574 !important;
  --hcc-line: #d8dfe4 !important;
  --hcc-control-line: #7b8b98 !important;
  --hcc-orange: #ef7801 !important;
  --hcc-accent: #bd4700 !important;
  --hcc-glass: #ffffff !important;
  --hcc-glass-filter: none !important;
  --hcc-shadow: 0 2px 4px rgb(13 42 61 / 0.04), 0 12px 30px -16px rgb(13 42 61 / 0.18) !important;
  --hcc-banner-shadow: inset 0 1px 0 #fff, 0 2px 4px rgb(13 42 61 / 0.04), 0 12px 28px -14px rgb(13 42 61 / 0.22), 0 32px 56px -36px rgb(13 42 61 / 0.28) !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:not(.dark):has([data-hcc-theme-scope]) {
    --hcc-glass: linear-gradient(115deg, rgb(255 255 255 / 0.97), rgb(255 255 255 / 0.82) 58%, rgb(239 245 249 / 0.84)) !important;
    --hcc-glass-filter: blur(20px) saturate(1.08) !important;
  }
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(.dashboard-bg, .technical-workspace, .visibility-workspace, .marketing-workspace, .designer-workspace, .content-factory-workspace, .client-profile-workspace) {
  background: var(--hcc-canvas) !important;
  color: var(--hcc-ink);
}

/* Explicit surface roles. Never recolor images, creative previews or charts by
 * matching arbitrary inline styles / bg-* substrings. */
:root:not(.dark):has([data-hcc-theme-scope]) :is(
  .hcc-light-banner, .visibility-hero, .technical-audit-header,
  .technical-section-hero, .client-profile-hero, .client-profile-section-header,
  .content-factory-commandbar, .content-factory-media-header,
  [data-dashboard-home] > header, [data-architecture-visual] > header,
  [data-keyword-discovery-visual] > header, [data-ai-pack-visual] > header,
  [data-diagnostics-visual] > header, .designer-workspace > header
) {
  background: var(--hcc-glass) !important;
  border-color: var(--hcc-line) !important;
  color: var(--hcc-ink) !important;
  box-shadow: var(--hcc-banner-shadow) !important;
  backdrop-filter: var(--hcc-glass-filter) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(
  .hcc-light-surface, .technical-surface-panel, .technical-chart-card,
  .technical-table-shell, .visibility-surface-panel, .marketing-surface-panel,
  .designer-surface-panel, .content-factory-media-panel, .appr-surface-panel,
  .client-profile-content-shell, .dash-home-panel
):not(header):not(.hcc-light-banner) {
  background: var(--hcc-paper) !important;
  border-color: var(--hcc-line) !important;
  box-shadow: var(--hcc-shadow) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(
  .technical-surface-inset, .marketing-surface-inset, .designer-surface-inset,
  .appr-surface-inset, .dash-home-inset
) {
  background: var(--hcc-soft) !important;
  border-color: var(--hcc-line) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(.dashboard-topbar, .dashboard-tabbar) {
  background: rgb(255 255 255 / 0.94) !important;
  border-color: var(--hcc-line) !important;
  color: var(--hcc-ink) !important;
  backdrop-filter: var(--hcc-glass-filter) !important;
}

/* Rails are reading/navigation surfaces in light mode, not dark banners. */
:root:not(.dark):has([data-hcc-theme-scope]) :is(.marketing-ink, .client-profile-rail, .designer-surface-rail) {
  background: var(--hcc-paper) !important;
  border-color: var(--hcc-line) !important;
  color: var(--hcc-ink) !important;
  box-shadow: var(--hcc-shadow) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) .designer-surface-rail :is(.text-slate-900, .text-slate-800, .text-slate-700) { color: var(--hcc-ink) !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .designer-workspace .text-slate-500:not([data-hcc-authored-content], [data-hcc-authored-content] *, [contenteditable], [contenteditable] *) { color: var(--hcc-muted) !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .designer-surface-rail [class~='bg-rose-500'][class~='text-white'] { background: #9f1239 !important; color: #fff !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .client-profile-workspace span.text-green-500 { color: #047857 !important; }

:root:not(.dark):has([data-hcc-theme-scope]) :where(
  .hcc-light-banner, .visibility-hero, .technical-audit-header,
  .client-profile-hero, .client-profile-section-header, .client-profile-rail,
  .marketing-ink, .designer-surface-rail, .hcc-light-surface
) :where(.text-white, .\!text-white, .text-slate-100, .text-slate-200, .text-slate-300, .\!text-slate-300, .text-foreground) {
  color: var(--hcc-ink) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(
  .visibility-hero-description, .visibility-hero-context, .technical-header-meta,
  .technical-header-date, .technical-header-next
) {
  color: var(--hcc-muted) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :where(
  .hcc-light-banner, .visibility-hero, .technical-audit-header, .client-profile-hero,
  .client-profile-section-header, .client-profile-rail, .marketing-ink, .designer-surface-rail
) :where(.text-slate-400, .text-slate-500, .\!text-slate-500) {
  color: var(--hcc-muted) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :where(
  .hcc-light-banner, .visibility-hero, .technical-audit-header, .client-profile-hero,
  .client-profile-section-header, .client-profile-rail, .marketing-ink, .designer-surface-rail
) :where(.text-orange-200, .text-orange-300, .\!text-orange-300, .text-cyan-100) {
  color: var(--hcc-accent) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(
  .visibility-hero-actions button, .visibility-hero-actions [role='combobox'],
  .client-profile-hero-action, .client-profile-context-chip, .client-profile-section-counter,
  .technical-header-control, .hcc-light-control
) {
  background: var(--hcc-paper) !important;
  color: var(--hcc-ink) !important;
  border-color: var(--hcc-control-line) !important;
  box-shadow: none !important;
}
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-control :is(span, svg) { color: inherit !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-control:hover:not(:disabled) { background: var(--hcc-soft) !important; }

:root:not(.dark):has([data-hcc-theme-scope]) .technical-header-stop {
  background: #fff1f2 !important;
  color: #9f1239 !important;
  border-color: #be123c !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) .technical-header-badge {
  color: var(--hcc-accent) !important;
}
:root:not(.dark):has([data-hcc-theme-scope]) :is(.technical-workspace, [data-architecture-visual]) .text-green-600 { color: #047857 !important; }
:root:not(.dark):has([data-hcc-theme-scope]) :is(.technical-workspace, [data-architecture-visual]) .text-amber-600 { color: #92400e !important; }

:root:not(.dark):has([data-hcc-theme-scope]) :is(.technical-header-menu, .technical-column-menu) {
  background: var(--hcc-paper) !important;
  color: var(--hcc-ink) !important;
  border-color: var(--hcc-line) !important;
  box-shadow: var(--hcc-banner-shadow) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) [data-hcc-nav-active='true'] {
  background: var(--hcc-ink) !important;
  color: #fff !important;
  border-color: var(--hcc-ink) !important;
  box-shadow: var(--hcc-shadow) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) [data-hcc-nav-active='true'] > :is(span, svg) {
  color: #fff !important;
  filter: none !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) [data-hcc-nav-active='true'] > span.absolute {
  background: var(--hcc-orange) !important;
  box-shadow: none !important;
}

/* On-fill pairs must win over the legacy .text-white rescue rule. Exact role
 * hooks (and the three existing ink utility tokens) avoid guessing from color. */
:root:not(.dark):has([data-hcc-theme-scope]) :is(
  .hcc-light-selected, .marketing-control-secondary,
  button[class~='bg-[#0d2a3d]'], button[class~='bg-[#0b1f2e]'],
  button[class~='bg-[#0d2a3d]/90'],
  button[class~='!bg-[#0d2a3d]'], .client-profile-nav-item[aria-current='page'],
  .visibility-nav-item[aria-current='page'], .technical-section-nav-button[data-active='true']
) {
  background: var(--hcc-ink) !important;
  color: #fff !important;
  border-color: var(--hcc-ink) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(
  .hcc-light-selected, .marketing-control-secondary,
  button[class~='bg-[#0d2a3d]'], button[class~='bg-[#0b1f2e]'],
  button[class~='bg-[#0d2a3d]/90'],
  button[class~='!bg-[#0d2a3d]'], .client-profile-nav-item[aria-current='page'],
  .visibility-nav-item[aria-current='page'], .technical-section-nav-button[data-active='true']
) :is(span, svg) {
  color: inherit !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(
  .hcc-light-primary, .dash-home-primary, .marketing-control-primary,
  .appr-control-primary, .cf-primary-action, .designer-control-primary, .client-profile-hero-action--save:not(:disabled)
) {
  background: var(--hcc-orange) !important;
  color: var(--hcc-ink) !important;
  border-color: var(--hcc-accent) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(
  .hcc-light-primary, .dash-home-primary, .marketing-control-primary,
  .appr-control-primary, .cf-primary-action, .designer-control-primary, .client-profile-hero-action--save:not(:disabled)
) :is(span, svg) {
  color: inherit !important;
}

/* Portals need the same opaque reading surface and visible input boundaries.
 * Overlay/backdrop nodes are not included. No blanket rule for dialog children. */
:root:not(.dark):has([data-hcc-theme-scope]) :is([data-hcc-dialog-surface], [role='menu'], [role='listbox'], [data-radix-popper-content-wrapper] > div) {
  background: var(--hcc-paper) !important;
  border-color: var(--hcc-line) !important;
  color: var(--hcc-ink) !important;
  box-shadow: var(--hcc-banner-shadow) !important;
}

/* Elevation is independent of blur. Respect the existing mobile shell (1900)
 * and Monthly drawer (2000/2010); explicit component layers remain authoritative. */
:root:not(.dark):has([data-hcc-theme-scope]) [data-hcc-dialog-overlay] {
  background: rgb(13 42 61 / 0.42) !important;
}
:root:not(.dark):has([data-hcc-theme-scope]) [data-hcc-dialog-overlay]:not([class*='z-[']) { z-index: 2000 !important; }
:root:not(.dark):has([data-hcc-theme-scope]) [data-hcc-dialog-surface]:not([class*='z-[']) { z-index: 2010 !important; }
:root:not(.dark):has([data-hcc-theme-scope]) [data-radix-popper-content-wrapper] { z-index: 2020 !important; }
:root:not(.dark):has([data-hcc-theme-scope]) [data-hcc-dialog-root] { z-index: 2000 !important; margin: 0 !important; }

/* Action orange is a fill, not a small-text color. Keep links at >=4.5:1. */
:root:not(.dark):has([data-hcc-theme-scope]) :is(.text-primary, .hcc-light-accent-text):not([data-hcc-authored-content], [data-hcc-authored-content] *, [contenteditable], [contenteditable] *) {
  color: var(--hcc-accent) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-error-text { color: #9f1239 !important; }

/* The Admin context map predates semantic surfaces. This boundary contains UI
 * diagrams only, never client previews or the adjacent source-code viewer. */
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-admin-context {
  background: var(--hcc-canvas) !important;
  color: var(--hcc-ink) !important;
}
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-admin-context :is([class~='bg-[#0d2a3d]/80'], [class~='bg-[#071827]/90']):not(.hcc-light-banner) {
  background: var(--hcc-paper) !important;
  box-shadow: var(--hcc-shadow) !important;
}
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-admin-context :is(.text-orange-100, .text-orange-200, .text-orange-300) {
  color: var(--hcc-accent) !important;
}
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-admin-context :is(.text-emerald-200, .text-emerald-300) { color: #047857 !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-admin-context :is(.text-amber-200, .text-amber-300) { color: #92400e !important; }

:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-onboarding :is(input, textarea, select) {
  background: var(--hcc-paper) !important;
  color: var(--hcc-ink) !important;
}
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-onboarding :is(.text-slate-100, .text-slate-200) { color: var(--hcc-ink) !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-onboarding :is(.text-slate-300, .text-slate-400, .text-slate-500) { color: var(--hcc-muted) !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-onboarding .text-emerald-600 { color: #047857 !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-onboarding .text-amber-600 { color: #92400e !important; }

/* Workflow edges are operational semantics, not marketing chart data. Keep the
 * group colors, with deeper strokes and a neutral grid on the light canvas. */
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-workflow-canvas { background: var(--hcc-paper) !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-workflow-grid {
  background-image: linear-gradient(#0d2a3d 1px, transparent 1px), linear-gradient(90deg, #0d2a3d 1px, transparent 1px) !important;
}
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-workflow-canvas marker path { fill: var(--hcc-muted) !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-workflow-canvas path[stroke='#22d3ee'] { stroke: #0e7490 !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-workflow-canvas path[stroke='#818cf8'] { stroke: #4338ca !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-workflow-canvas path[stroke='#a78bfa'] { stroke: #6d28d9 !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-workflow-canvas path[stroke='#fbbf24'] { stroke: #92400e !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-workflow-canvas path[stroke='#34d399'] { stroke: #047857 !important; }
:root:not(.dark):has([data-hcc-theme-scope]) .hcc-light-workflow-canvas path[stroke='#fb7185'] { stroke: #be123c !important; }

:root:not(.dark):has([data-hcc-theme-scope]) .marketing-ink .hcc-light-selected :is(.bg-orange-50, .bg-orange-100) {
  background: rgb(255 255 255 / 0.12) !important;
  border-color: rgb(255 255 255 / 0.24) !important;
}

/* Custom dialog chrome predates semantic UI tokens. Exact legacy utility
 * tokens only; authored report HTML is explicitly excluded from this adapter. */
:root:not(.dark):has([data-hcc-theme-scope]) [data-hcc-dialog-surface]
  :where(.text-white, .text-slate-100, .text-slate-200, .text-slate-300):not([data-hcc-authored-content], [data-hcc-authored-content] *, [contenteditable], [contenteditable] *, button, button *, a, a *) {
  color: var(--hcc-ink) !important;
}
:root:not(.dark):has([data-hcc-theme-scope]) [data-hcc-dialog-surface]
  :where(.text-slate-400, .text-slate-500):not([data-hcc-authored-content], [data-hcc-authored-content] *, [contenteditable], [contenteditable] *, button, button *, a, a *) {
  color: var(--hcc-muted) !important;
}
:root:not(.dark):has([data-hcc-theme-scope]) [data-hcc-dialog-surface]
  :where(.text-cyan-200, .text-cyan-300, .text-blue-300):not([data-hcc-authored-content], [data-hcc-authored-content] *, [contenteditable], [contenteditable] *, button, button *, a, a *) {
  color: var(--hcc-accent) !important;
}
:root:not(.dark):has([data-hcc-theme-scope]) [data-hcc-dialog-surface]
  :where(div, section, input, textarea, select):is(.bg-slate-950, .bg-slate-900, .bg-slate-800):not([data-hcc-authored-content], [data-hcc-authored-content] *, [contenteditable], [contenteditable] *) {
  background: var(--hcc-paper) !important;
  color: var(--hcc-ink) !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(input:not([type='checkbox']):not([type='radio']), textarea, select, [role='combobox']) {
  border-color: var(--hcc-control-line) !important;
  color: var(--hcc-ink);
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(button, a, input, textarea, select, summary, [tabindex='0']):focus-visible {
  outline: 2px solid var(--hcc-accent) !important;
  outline-offset: 3px;
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(input, textarea, select, [role='combobox'])[aria-invalid='true'] {
  border-color: #be123c !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(.hcc-light-selected, .marketing-control-secondary):hover:not(:disabled) {
  background: #173d55 !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(.hcc-light-primary, .dash-home-primary, .marketing-control-primary, .appr-control-primary, .cf-primary-action, .designer-control-primary):hover:not(:disabled) {
  background: #ff901f !important;
}

:root:not(.dark):has([data-hcc-theme-scope]) :is(.client-profile-hero-action:disabled, .visibility-hero-actions button:disabled) {
  background: var(--hcc-soft) !important;
  color: var(--hcc-muted) !important;
  border-color: var(--hcc-line) !important;
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root:not(.dark):has([data-hcc-theme-scope]) {
    --hcc-glass: #ffffff !important;
    --hcc-glass-filter: none !important;
  }
}

@media (forced-colors: active) {
  :root:not(.dark):has([data-hcc-theme-scope]) {
    --hcc-canvas: Canvas !important;
    --hcc-paper: Canvas !important;
    --hcc-soft: Canvas !important;
    --hcc-ink: CanvasText !important;
    --hcc-muted: CanvasText !important;
    --hcc-line: ButtonText !important;
    --hcc-control-line: ButtonText !important;
    --hcc-glass: Canvas !important;
    --hcc-glass-filter: none !important;
    --hcc-accent: Highlight !important;
  }
}

}