/*
 * 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: #256ee8;
  --system-brand-cyan: #12a9d8;
  --system-brand-mint: #0f8f6f;
  --system-brand-gradient: linear-gradient(135deg, #256ee8 0%, #3b75e6 45%, #12a9d8 100%);
  --system-brand-gradient-soft: linear-gradient(135deg, rgba(37, 110, 232, 0.12), rgba(91, 109, 232, 0.08) 52%, rgba(18, 169, 216, 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: #5b6de8;
  --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: #385bd8;
  --page-accent-end: #12a9d8;
  --page-accent-soft: rgba(56, 91, 216, 0.1);
  --page-accent-soft-end: rgba(18, 169, 216, 0.09);
  --dept-product-start: #385bd8;
  --dept-product-end: #12a9d8;
  --dept-start: var(--dept-product-start);
  --dept-end: var(--dept-product-end);
  --dept-soft: rgba(56, 91, 216, 0.09);
  --entry-training-start: #5b6de8;
  --entry-training-end: #7a63d8;
  --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: #385bd8;
  --pc-green-deep: #2746ae;
  --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-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: #284fc0;
  border-color: #b9cdf3;
  background-color: #edf3ff;
  box-shadow: inset 0 0 0 1px rgba(56, 91, 216, 0.08);
}

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: #385bd8;
}

/* 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;
}