/*
 * VISUAL-COLOR-HARMONY-V1
 * Final color-only layer for the approved PC and Mobile structure.
 * It intentionally changes no layout, dimensions, visibility or interaction.
 */

html body.layout-skin-only {
  --system-brand-blue: #2563eb;
  --system-brand-cyan: #06b6d4;
  --system-brand-mint: #0f8f6f;
  --system-brand-gradient: linear-gradient(135deg, #2563eb 0%, #168eea 52%, #06b6d4 100%);
  --system-brand-gradient-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(22, 142, 234, 0.08) 52%, rgba(6, 182, 212, 0.1));
  --system-canvas: #eef5fb;
  --system-canvas-mint: #f1f8fc;
  --system-surface-soft: #f7faff;
  --system-line: #d8e4f0;
  --system-line-strong: #bfd1e5;
  --system-ink: #102b43;
  --system-ink-secondary: #425d73;
  --system-ink-muted: #6c8194;
  --system-shadow-card: 0 10px 26px rgba(42, 91, 151, 0.09), 0 1px 2px rgba(31, 72, 122, 0.04);
  --system-shadow-raised: 0 18px 42px rgba(42, 91, 151, 0.13), 0 2px 6px rgba(31, 72, 122, 0.05);
  --system-focus: rgba(37, 110, 232, 0.25);
  --brand-blue: var(--system-brand-blue);
  --brand-cyan: var(--system-brand-cyan);
  --brand-teal: #167fae;
  --brand-green: var(--status-success);
  --brand-primary: var(--system-brand-blue);
  --brand-primary-hover: #1d5fcf;
  --brand-secondary: var(--system-brand-cyan);
  --brand-accent: #168eea;
  --brand-gradient-primary: var(--system-brand-gradient);
  --brand-gradient-soft: var(--system-brand-gradient-soft);
  --beauty-brand-950: #153653;
  --beauty-brand-900: #194566;
  --beauty-brand-700: #246da5;
  --beauty-brand-600: var(--system-brand-blue);
  --beauty-brand-100: #eaf3ff;
  --beauty-page-bg: var(--system-canvas);
  --beauty-surface-soft: var(--system-surface-soft);
  --beauty-border-soft: var(--system-line);
  --beauty-border-strong: var(--system-line-strong);
  --beauty-text-primary: var(--system-ink);
  --beauty-text-secondary: var(--system-ink-secondary);
  --beauty-text-muted: var(--system-ink-muted);
  --ysj-bg: var(--system-canvas);
  --ysj-bg-deep: #e9f2fb;
  --ysj-surface-soft: var(--system-surface-soft);
  --ysj-surface-tint: #edf5ff;
  --ysj-line: var(--system-line);
  --ysj-line-strong: var(--system-line-strong);
  --ysj-text: var(--system-ink);
  --ysj-text-soft: var(--system-ink-secondary);
  --ysj-muted: var(--system-ink-muted);
  --ysj-brand: var(--system-brand-blue);
  --ysj-brand-strong: #1e5ebc;
  --ysj-brand-soft: #eaf3ff;
  --op-brand: var(--system-brand-blue);
  --op-brand-strong: #1e5ebc;
  --pd-green-900: #153653;
  --pd-green-700: var(--system-brand-blue);
  --pd-green-50: #edf5ff;
  --page-bg: var(--system-canvas);
  --page-bg-accent: #e9f3fc;
  --page-bg-soft: var(--system-canvas-mint);
  --surface-bg-soft: var(--system-surface-soft);
  --surface-bg-blue: #f1f6fd;
  --surface-border: var(--system-line);
  --surface-border-active: rgba(37, 110, 232, 0.34);
  --surface-shadow: var(--system-shadow-card);
  --surface-shadow-raised: var(--system-shadow-raised);
  --text-primary: var(--system-ink);
  --text-secondary: var(--system-ink-secondary);
  --text-muted: var(--system-ink-muted);
  --text-link: var(--system-brand-blue);
  --button-primary: var(--system-brand-blue);
  --button-primary-hover: #1d5fcf;
  --button-primary-bg: var(--system-brand-gradient);
  --button-secondary: #f6f9fe;
  --focus-ring: var(--system-focus);
  --input-focus-border: var(--system-brand-blue);
  --input-focus-ring: var(--system-focus);
  --table-header-bg: #eaf2fb;
  --table-header-text: #194566;
  --table-row-alt-bg: #f8fafe;
  --table-row-hover: #edf5ff;
  --table-border: #e0e9f3;
  --table-frozen-shadow: 7px 0 16px rgba(42, 91, 151, 0.11);
  color: var(--system-ink);
  background-color: var(--system-canvas);
  background-image:
    radial-gradient(circle at 84% 0%, rgba(18, 169, 216, 0.11), transparent 32%),
    linear-gradient(135deg, #eef5fb 0%, #f8fbff 52%, #eef8fc 100%);
}

/* Product and SOP use one cool family. Orange is reserved for warnings. */
html body.layout-skin-only[data-visual-theme="product"] {
  --page-accent-start: #2563eb;
  --page-accent-end: #06b6d4;
  --page-accent-soft: rgba(37, 99, 235, 0.1);
  --page-accent-soft-end: rgba(6, 182, 212, 0.09);
  --dept-product-start: #2563eb;
  --dept-product-end: #06b6d4;
  --dept-start: var(--dept-product-start);
  --dept-end: var(--dept-product-end);
  --dept-soft: rgba(56, 91, 216, 0.09);
  --entry-training-start: #2563eb;
  --entry-training-end: #168eea;
  --entry-product-feedback-start: #477bd8;
  --entry-product-feedback-end: #3b9dcc;
  --entry-import-start: #2f86d8;
  --entry-import-end: #12a9d8;
}

html body.layout-skin-only[data-visual-theme="product"] #product-center-app {
  --pc-ink: #142c43;
  --pc-muted: #60758a;
  --pc-line: #dbe6f1;
  --pc-surface: #ffffff;
  --pc-soft: #f6f9fe;
  --pc-green: #2563eb;
  --pc-green-deep: #1d4ed8;
  --pc-green-soft: #edf2ff;
  --pc-blue: #237fbd;
  --pc-blue-soft: #edf8fd;
  --pc-gold: #a86612;
  --pc-gold-soft: #fff8e8;
  --pc-coral: #a94745;
  --pc-coral-soft: #fff2f1;
  background-color: #f2f6fc;
}

html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-command,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-section-nav,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-readiness,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-summary,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-toolbar,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-main,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-detail,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-card,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-panel,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-sop-library-card,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-sop-sheet {
  border-color: var(--pc-line);
  background-color: var(--pc-surface);
  box-shadow: 0 10px 28px rgba(42, 91, 151, 0.08);
}

html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-command,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-sop-document-head,
html body.layout-skin-only[data-visual-theme="product"] .native-product-hero,
html body.layout-skin-only[data-visual-theme="product"] .native-product-sop,
html body.layout-skin-only[data-visual-theme="product"] .native-product-support {
  border-color: color-mix(in srgb, var(--page-accent-start) 24%, var(--system-line));
  background-color: #ffffff;
  background-image: linear-gradient(135deg, var(--page-accent-soft), #ffffff 56%, var(--page-accent-soft-end));
  box-shadow: 0 12px 30px rgba(42, 91, 151, 0.09);
}

html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-command {
  border-color: transparent;
  background-color: #ef6b35;
  background-image: linear-gradient(118deg, #f47a2c 0%, #ec5f43 43%, #d94680 76%, #8757d9 100%);
  box-shadow: 0 16px 36px rgba(199, 76, 55, 0.22);
}

html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-section-link.is-active,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-segment.is-active,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-tab-button.is-active,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-button-solid,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .button:not(.ghost),
html body.layout-skin-only[data-visual-theme="product"] .mobile-product-sop-source-download,
html body.layout-skin-only[data-visual-theme="product"] .native-primary-action {
  color: #ffffff;
  border-color: var(--page-accent-start);
  background-color: var(--page-accent-start);
  background-image: linear-gradient(135deg, var(--page-accent-start), var(--page-accent-end));
  box-shadow: 0 9px 20px rgba(56, 91, 216, 0.2);
}

html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-section-link:hover,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-section-link:focus-visible,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-sop-library-action,
html body.layout-skin-only[data-visual-theme="product"] .mobile-product-sop-brand-tabs button[aria-selected="true"],
html body.layout-skin-only[data-visual-theme="product"] .mobile-product-sop-detail-nav a,
html body.layout-skin-only[data-visual-theme="product"] .mobile-product-sop-back-results {
  color: color-mix(in srgb, var(--page-accent-start) 82%, #5a2612);
  border-color: color-mix(in srgb, var(--page-accent-start) 35%, #ffffff);
  background-color: var(--page-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--page-accent-start) 12%, transparent);
}

html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-sop-library-card {
  border-top-color: var(--page-accent-end);
}

html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-chef-status,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-chef-portion,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-chef-sku-head,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-chef-sku-row,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-chef-prep-list li,
html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-chef-process-list li,
html body.layout-skin-only[data-visual-theme="product"] .mobile-product-sop-facts p,
html body.layout-skin-only[data-visual-theme="product"] .mobile-product-sop-materials > div {
  border-color: var(--pc-line, var(--system-line));
  background-color: #f7f9fe;
}

html body.layout-skin-only[data-visual-theme="product"] #product-center-app .pc-chef-process-list li::before,
html body.layout-skin-only[data-visual-theme="product"] .mobile-product-sop-process li b,
html body.layout-skin-only[data-visual-theme="product"] .mobile-product-sop-prep-list li b {
  color: #ffffff;
  background-color: var(--page-accent-start);
  background-image: linear-gradient(135deg, var(--page-accent-start), var(--page-accent-end));
}

/*
 * System-wide primary-control contract.
 * This final layer prevents legacy ink-green button rules from resurfacing on
 * existing or newly developed pages. Department accents may still change the
 * two gradient endpoints; green remains reserved for semantic success states.
 */
html body.layout-skin-only:not([data-visual-theme="product"]) :where(
  button,
  .button,
  a.button,
  button[type="submit"],
  input[type="submit"],
  .pc-button-solid,
  .mobile-action-button:not(.secondary),
  .native-primary-action
):not(.ghost):not(.secondary):not(.warn):not(.danger):not(.good):not(.status-success):not([disabled]) {
  color: #ffffff !important;
  border-color: var(--page-accent-start, #256ee8) !important;
  background-color: var(--page-accent-start, #256ee8) !important;
  background-image: linear-gradient(
    135deg,
    #2563eb 0%,
    #168eea 52%,
    #06b6d4 100%
  ) !important;
  box-shadow: 0 8px 18px rgba(37, 110, 232, 0.2) !important;
}

html body.layout-skin-only:not([data-visual-theme="product"]) :where(
  button,
  .button,
  a.button,
  button[type="submit"],
  input[type="submit"],
  .pc-button-solid,
  .mobile-action-button:not(.secondary),
  .native-primary-action
):not(.ghost):not(.secondary):not(.warn):not(.danger):not(.good):not(.status-success):not([disabled]):hover {
  color: #ffffff !important;
  border-color: #1d5fcf !important;
  background-color: #1d5fcf !important;
  background-image: linear-gradient(
    135deg,
    #1d4ed8 0%,
    #0284c7 52%,
    #0891b2 100%
  ) !important;
}

html body.layout-skin-only:not([data-visual-theme="product"]) :where(
  .button.ghost,
  a.button.ghost,
  button.ghost,
  .button.secondary,
  button.secondary,
  .pc-button-outline
) {
  color: #1d5fcf !important;
  border-color: #bfd1e5 !important;
  background-color: #f7faff !important;
  background-image: none !important;
  box-shadow: 0 4px 12px rgba(37, 110, 232, 0.08) !important;
}

/* Identity is context, not a success state: keep top-bar text in cloud blue. */
html body.layout-skin-only .top-actions .badge.good {
  color: #244b74 !important;
  border-color: #bfdbfe !important;
  background-color: #eff6ff !important;
  background-image: none !important;
}

/*
 * PC control closure. These selectors intentionally outrank legacy page-level
 * !important rules so permission approval and filter actions use the same
 * pure blue-to-cyan family as the approved mobile controls (no violet stop).
 */
html body.layout-skin-only .permission-approval-entry,
html body.layout-skin-only .executive-filter button[type="submit"],
html body.layout-skin-only .filter-bar button[type="submit"] {
  color: #ffffff !important;
  border-color: #2563eb !important;
  background-color: #2563eb !important;
  background-image: linear-gradient(135deg, #2563eb 0%, #168eea 52%, #06b6d4 100%) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22) !important;
  text-shadow: 0 1px 1px rgba(8, 47, 107, 0.18);
}

html body.layout-skin-only .permission-approval-entry:hover,
html body.layout-skin-only .executive-filter button[type="submit"]:hover,
html body.layout-skin-only .filter-bar button[type="submit"]:hover {
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
  background-color: #1d4ed8 !important;
  background-image: linear-gradient(135deg, #1d4ed8 0%, #0284c7 52%, #0891b2 100%) !important;
}

/* Structural copy uses navy/cloud blue; green remains semantic-success only. */
html body.layout-skin-only[data-visual-theme="operations"] :where(
  .executive-data-page-title,
  .executive-data-page-note,
  .executive-filter label,
  .executive-filter .filter-control > span,
  .filter-summary-line,
  .top-actions .badge.good,
  .top-actions .button.ghost
) {
  color: #244b74 !important;
}

/* Semantic locks: structural harmony never recolors business meaning. */
html body.layout-skin-only {
  --status-success: #0f8f6f;
  --status-warning: #b7791f;
  --status-danger: #d92d20;
  --status-info: #256ee8;
  --trend-up: #b42318;
  --trend-down: #1d4ed8;
  --trend-flat: #475569;
  --sab-s: #ef4444;
  --sab-a: #facc15;
  --sab-b: #3b82f6;
  --sab-unrated: #9ca3af;
}

html body.layout-skin-only .good,
html body.layout-skin-only .status-success,
html body.layout-skin-only .mobile-product-sop-status.is-effective {
  color: var(--status-success);
  border-color: rgba(15, 143, 111, 0.22);
  background-color: #eaf8f3;
  background-image: none;
}

html body.layout-skin-only .trend-up,
html body.layout-skin-only .ed-trend-up,
html body.layout-skin-only .mobile-sab-delta-up,
html body.layout-skin-only .mobile-tabulator-delta-up {
  color: var(--trend-up);
  background-color: #fff2f1;
  background-image: none;
}

html body.layout-skin-only .trend-down,
html body.layout-skin-only .ed-trend-down,
html body.layout-skin-only .mobile-sab-delta-down,
html body.layout-skin-only .mobile-tabulator-delta-down {
  color: var(--trend-down);
  background-color: #eff6ff;
  background-image: none;
}