/* Shared chrome contracts. Deliberately excludes canvas, artwork, image pixels,
   product color swatches, validation semantics and exported design content. */
:root {
    --theme-panel: var(--app-surface, #fff);
    --theme-sidebar: var(--app-sidebar-bg, #fff);
    --theme-input: var(--app-input-bg, #fff);
    --theme-border: var(--app-border, #e2e7ee);
    --theme-radius: 10px;
    --theme-button-radius: 7px;
    --theme-blur: none;
    --theme-shadow: 0 1px 3px rgb(15 23 42 / 5%), 0 5px 18px rgb(15 23 42 / 4%);
    --theme-button-shadow: none;
    --theme-input-shadow: none;
    --theme-highlight: rgb(255 255 255 / 65%);
    --theme-depth: rgb(18 30 48 / 13%);
}
html[data-theme="dark"] {
    --theme-highlight: rgb(255 255 255 / 9%);
    --theme-depth: rgb(0 0 0 / 42%);
    --theme-shadow: 0 1px 3px rgb(0 0 0 / 16%), 0 6px 20px rgb(0 0 0 / 12%);
}
html[data-surface="glass"] {
    --theme-panel: color-mix(in srgb, var(--app-surface) 76%, transparent);
    --theme-sidebar: color-mix(in srgb, var(--app-sidebar-bg) 82%, transparent);
    --theme-border: color-mix(in srgb, var(--app-border) 58%, var(--theme-highlight));
    --theme-blur: blur(18px) saturate(140%);
    --theme-shadow: inset 0 1px 0 var(--theme-highlight), 0 12px 28px color-mix(in srgb, var(--app-primary) 8%, transparent), 0 24px 56px var(--theme-depth);
    --theme-button-shadow: inset 0 1px 0 var(--theme-highlight), 0 4px 12px var(--theme-depth);
    --theme-radius: 18px;
}
html[data-surface="clay"] {
    --theme-panel: linear-gradient(145deg, color-mix(in srgb, var(--app-surface) 98%, white 2%), color-mix(in srgb, var(--app-surface) 91%, var(--app-background) 9%));
    --theme-sidebar: linear-gradient(145deg, color-mix(in srgb, var(--app-sidebar-bg) 98%, white 2%), color-mix(in srgb, var(--app-sidebar-bg) 90%, var(--app-background) 10%));
    --theme-border: color-mix(in srgb, var(--app-border) 74%, var(--theme-highlight));
    --theme-radius: 20px;
    --theme-button-radius: 13px;
    --theme-shadow: inset 1px 1px 0 var(--theme-highlight), 8px 10px 24px var(--theme-depth), -6px -6px 16px var(--theme-highlight);
    --theme-button-shadow: inset 1px 1px 2px var(--theme-highlight), inset -1px -1px 2px var(--theme-depth), 3px 4px 9px var(--theme-depth);
    --theme-input-shadow: inset 3px 4px 9px var(--theme-depth), inset -1px -1px 2px var(--theme-highlight);
}

/* Existing component classes are role adapters, so every page shares a surface. */
:is(.admin-shell, .app-shell) :is(.section-card, .stat-card, .dashboard-shortcut,
    .dashboard-metric, .dashboard-panel, .product-detail-card, .product-details-panel, .order-design-card,
    .options-section, .product-images-section, .canvas-background-section,
    .tool-panel, .selected-actions, .design-tips, .product-card,
    .modal-card, .default-artwork-library, .database-product-option,
    .pattern-panel, .cc-artwork-card, .default-artwork-card, .shape-card,
    .upload-card, .object-action-toolbar, .preview3d-toolbar,
    .sidebar-section.quick-personalize-section, .sidebar-section.product-summary-section,
    .sidebar-section.options-section, .sidebar-section.product-images-section,
    .sidebar-section.canvas-background-section),
:is(.product-details-modal, .order-preview-dialog, .order-preview-modal-panel, .modal-card),
:root [data-theme-role="panel"], :root [data-theme-role="dialog"], :root [data-theme-role="menu"] {
    background: var(--theme-panel);
    border-color: var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    backdrop-filter: var(--theme-blur);
    -webkit-backdrop-filter: var(--theme-blur);
}
.admin-sidebar, .app-shell :is(.left-sidebar, .right-sidebar), [data-theme-role="sidebar"] {
    background: var(--theme-sidebar);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow);
    backdrop-filter: var(--theme-blur);
    -webkit-backdrop-filter: var(--theme-blur);
}
.admin-topbar, .app-shell :is(.topbar, .summary-bar, .tool-tabs, .mobile-sidebar-header),
[data-theme-role="toolbar"] {
    background: var(--theme-panel);
    border-color: var(--theme-border);
    backdrop-filter: var(--theme-blur);
    -webkit-backdrop-filter: var(--theme-blur);
}
html[data-surface="glass"] .admin-shell,
html[data-surface="glass"] .app-shell {
    background: radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--app-primary) 16%, transparent), transparent 48%), radial-gradient(ellipse at 92% 8%, color-mix(in srgb, var(--app-active-button) 10%, transparent), transparent 42%), var(--app-background);
}
html[data-surface="clay"] .admin-shell,
html[data-surface="clay"] .app-shell {
    background: radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--app-primary) 11%, transparent), transparent 52%), var(--app-background);
}
html[data-surface="clay"] .admin-topbar { border-radius: 0 0 var(--theme-radius) var(--theme-radius); }

/* Utility-based Admin cards need an explicit material surface adapter. */
html[data-surface="glass"] .admin-shell :is(section, article, button, [role="dialog"], [role="menu"])[class~="bg-white"][class~="border"],
html[data-surface="glass"] .admin-shell div[class~="bg-white"][class~="border"][class~="shadow-sm"] {
    background: var(--theme-panel) !important;
    border-color: var(--theme-border) !important;
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    backdrop-filter: var(--theme-blur);
    -webkit-backdrop-filter: var(--theme-blur);
}
html[data-surface="clay"] .admin-shell :is(section, article, button, [role="dialog"], [role="menu"])[class~="bg-white"][class~="border"],
html[data-surface="clay"] .admin-shell div[class~="bg-white"][class~="border"][class~="shadow-sm"] {
    background: var(--theme-panel) !important;
    border-color: var(--theme-border) !important;
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
}

/* Theme Studio cards inherit the active Admin material while preserving swatch colors. */
html[data-surface="glass"] .cc-theme-studio :is(.cc-studio-panel, .cc-studio-preview-card, .cc-studio-plan, .cc-studio-preset:not(.is-selected), .cc-studio-savebar) {
    background: var(--theme-panel);
    border-color: var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    backdrop-filter: var(--theme-blur);
    -webkit-backdrop-filter: var(--theme-blur);
}
html[data-surface="clay"] .cc-theme-studio :is(.cc-studio-panel, .cc-studio-preview-card, .cc-studio-plan, .cc-studio-preset:not(.is-selected), .cc-studio-savebar) {
    background: var(--theme-panel);
    border-color: var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
}
html[data-surface="glass"] .cc-theme-studio .cc-studio-preset.is-selected,
html[data-surface="clay"] .cc-theme-studio .cc-studio-preset.is-selected {
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
}
html[data-surface="glass"] .cc-theme-studio button,
html[data-surface="clay"] .cc-theme-studio button {
    border-radius: var(--theme-button-radius);
    box-shadow: var(--theme-button-shadow);
}

.admin-shell :is(.button, .admin-theme-toggle, .admin-icon-button, .customize-button, .order-open-button),
.app-shell :is(.save-btn, .order-btn, .primary-button, .secondary-button, .icon-button, .mode-btn, .tool-tab, .theme-toggle),
[data-theme-role="button"] {
    border-radius: var(--theme-button-radius);
    box-shadow: var(--theme-button-shadow);
}
.admin-shell :is(input:not([type="color"]):not([type="checkbox"]):not([type="radio"]), select, textarea),
.app-shell :is(.input, .product-option-textarea, .stepper input), [data-theme-role="input"] {
    background: var(--theme-input);
    color: var(--app-text);
    border-color: var(--theme-border);
    border-radius: var(--theme-button-radius);
}
html[data-surface="clay"] :is(.admin-shell, .app-shell) :is(.input, input[type="text"], input[type="number"], select, textarea) {
    box-shadow: var(--theme-input-shadow);
}
.admin-shell :is(.product-table-wrap, .order-table-wrap), [data-theme-role="table"] {
    background: var(--theme-panel);
    border-color: var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    backdrop-filter: var(--theme-blur);
    -webkit-backdrop-filter: var(--theme-blur);
}

/* Every editor-exposed interaction color has a real component consumer. */
.admin-nav a { color: var(--app-sidebar-text); }
.admin-nav a svg { color: var(--app-sidebar-icon); }
.admin-nav a.active { background: var(--app-active-button); color: var(--app-active-button-text, #fff); border-color: var(--app-active-button); }
.admin-nav a.active svg, .admin-nav a.active:hover { color: var(--app-active-button-text, #fff); }
.admin-nav a.active::before { background: currentColor; }
.admin-nav a:not(.active):hover { color: var(--app-sidebar-text); }
.admin-shell .button-primary:active:not(:disabled) { background: var(--app-active-button); border-color: var(--app-active-button); color: var(--app-active-button-text, #fff); }
.admin-shell :is(.button-secondary, .admin-theme-toggle, .admin-icon-button) { background: var(--app-inactive-button); color: var(--app-inactive-button-text, var(--app-text)); }
.admin-shell .button:disabled { background: var(--app-inactive-button); border-color: var(--app-border); color: var(--app-inactive-button-text, var(--app-secondary-text)); opacity: .65; }
.app-shell :is(.left-sidebar, .right-sidebar) { color: var(--app-sidebar-text); }
.app-shell :is(.left-sidebar, .right-sidebar) :is(h2, h3, .panel-title-row, .section-heading-row, .sidebar-section > p) { color: var(--app-sidebar-text); }
.app-shell :is(.left-sidebar, .right-sidebar) :is(.icon, .layer-icon-btn) { color: var(--app-sidebar-icon); }
.app-shell :is(.save-btn, .order-btn, .primary-button, .icon-button.primary) { background: var(--app-button); color: var(--app-button-text, #fff); }
.app-shell :is(.save-btn, .order-btn, .primary-button, .icon-button.primary):hover:not(:disabled) { background: var(--app-button-hover); color: var(--app-button-hover-text, var(--app-button-text, #fff)); }
.app-shell :is(.mode-btn.active, .tool-tab.active, .segmented button.active, .view-choice button.active) { background: var(--app-active-button); color: var(--app-active-button-text, #fff); border-color: var(--app-active-button); }
.app-shell :is(.mode-btn:not(.active), .tool-tab:not(.active), .secondary-button, .theme-toggle) { background: var(--app-inactive-button); color: var(--app-inactive-button-text, var(--app-text)); }
.app-shell :is(.save-btn, .order-btn, .primary-button, .tool-tab, .mode-btn):disabled { background: var(--app-inactive-button); color: var(--app-inactive-button-text, var(--app-secondary-text)); opacity: .6; }
.admin-shell .button-primary:hover:not(:disabled) { color: var(--app-button-hover-text, var(--app-button-text, #fff)); }
.app-shell :is(.left-sidebar, .right-sidebar) .active .icon { color: inherit; }
.app-shell .workspace { background: var(--app-background); }
.app-shell .mobile-tools-btn { background: var(--app-inactive-button); color: var(--app-inactive-button-text, var(--app-text)); }
.app-shell .shape-transparent-row, .app-shell .text-style-hint { color: var(--app-secondary-text); }

/* Focus and validation stay legible and never inherit decorative opacity. */
:is(.admin-shell, .app-shell) :is(button, a, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--app-focus-color, var(--app-primary, #1769aa));
    outline-offset: 3px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-surface="glass"] { --theme-panel: var(--app-surface); --theme-sidebar: var(--app-sidebar-bg); --theme-blur: none; }
}
@media (prefers-reduced-transparency: reduce) {
    html[data-surface="glass"] { --theme-panel: var(--app-surface); --theme-sidebar: var(--app-sidebar-bg); --theme-blur: none; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.admin-shell, .app-shell) :is(button, a, input, select, textarea) { transition: none; }
}
@media (max-width: 768px) {
    html[data-surface="glass"] { --theme-blur: none; --theme-panel: var(--app-surface); --theme-sidebar: var(--app-sidebar-bg); }
}
@media (forced-colors: active) {
    html[data-surface="glass"], html[data-surface="clay"] {
        --theme-panel: Canvas;
        --theme-sidebar: Canvas;
        --theme-border: CanvasText;
        --theme-blur: none;
        --theme-shadow: none;
        --theme-button-shadow: none;
        --theme-input-shadow: none;
    }
    :is(.admin-shell, .app-shell) :is(section, article, button, input, select, textarea, [role="dialog"], [role="menu"]) {
        forced-color-adjust: auto;
    }
}