/* Semantic color/depth only. Structural layout, scrolling and card flattening live in dedicated files.
   Color reinforces visible labels; it never replaces them. */

:root {
  --sk-depth-1-tint: .05;
  --sk-depth-1-border: .18;
  --sk-depth-2-tint: .085;
  --sk-depth-2-border: .24;
  --sk-depth-3-tint: .13;
  --sk-depth-3-border: .32;
  --sk-page-tint: .03;
  --sk-page-tint-end: .018;
  --sk-focus-tint: .085;
  --sk-focus-tint-end: .045;
  --sk-record-screen-tint: .13;
  --sk-record-screen-tint-end: .07;
}

/* Level 1: primary-area page context. */
body:has(.shell[data-primary-area='customers']:not(.shell--section-focus)) {
  background:
    linear-gradient(180deg, rgb(29 78 216 / var(--sk-page-tint)), rgb(29 78 216 / var(--sk-page-tint-end))),
    #f8fafc;
}

body:has(.shell[data-primary-area='messages']:not(.shell--section-focus)) {
  background:
    linear-gradient(180deg, rgb(14 116 144 / var(--sk-page-tint)), rgb(14 116 144 / var(--sk-page-tint-end))),
    #f8fafc;
}

body .shell {
  --sk-area-accent: var(--sk-work-accent);
  --sk-area-soft: var(--sk-work-soft);
  --sk-area-rgb: 71 85 105;
}

body .shell[data-primary-area='customers'] {
  --sk-area-accent: var(--sk-lead-accent);
  --sk-area-soft: var(--sk-lead-soft);
  --sk-area-rgb: 29 78 216;
}

body .shell[data-primary-area='messages'] {
  --sk-area-accent: var(--sk-message-accent);
  --sk-area-soft: var(--sk-message-soft);
  --sk-area-rgb: 14 116 144;
}

body .shell[data-primary-area]:not([data-primary-area='home']) > .primary-area-bar .primary-area-heading {
  border-left-color: var(--sk-area-accent);
  background: linear-gradient(90deg, rgb(var(--sk-area-rgb) / var(--sk-depth-1-tint)), transparent 82%);
}

body .shell[data-primary-area]:not([data-primary-area='home']) > .primary-area-bar .primary-area-home {
  border-color: rgb(var(--sk-area-rgb) / var(--sk-depth-1-border));
  color: var(--sk-area-accent);
}

/* Section semantic identity. */
body .shell > .panel {
  --sk-section-accent: var(--sk-area-accent);
  --sk-section-soft: var(--sk-area-soft);
  --sk-section-rgb: var(--sk-area-rgb);
}

body .shell > .panel--attention {
  --sk-section-accent: var(--sk-attention-accent);
  --sk-section-soft: var(--sk-attention-soft);
  --sk-section-rgb: 194 65 12;
}

body .shell > .panel--paused {
  --sk-section-accent: var(--sk-paused-accent);
  --sk-section-soft: var(--sk-paused-soft);
  --sk-section-rgb: 124 58 237;
}

body .shell > .panel--archive {
  --sk-section-accent: var(--sk-archive-accent);
  --sk-section-soft: var(--sk-archive-soft);
  --sk-section-rgb: 100 116 139;
}

body .shell > .panel > .disclosure[open] > summary,
body .shell.shell--section-focus > .panel--focused > .disclosure > summary {
  color: var(--sk-section-accent);
}

body .shell > .panel > .disclosure[open] > summary .disclosure__summary-icon,
body .shell > .panel > .disclosure[open] > summary::after {
  color: var(--sk-section-accent);
}

/* Level 2: focused top-level section. The whole page carries the semantic context. */
body .shell.shell--section-focus > .panel--focused.panel--action-queue {
  background:
    linear-gradient(180deg, rgb(194 65 12 / var(--sk-focus-tint)), rgb(194 65 12 / var(--sk-focus-tint-end))),
    #f8fafc;
}

body .shell.shell--section-focus > .panel--focused.panel--paused {
  background:
    linear-gradient(180deg, rgb(124 58 237 / var(--sk-focus-tint)), rgb(124 58 237 / var(--sk-focus-tint-end))),
    #f8fafc;
}

body .shell.shell--section-focus > .panel--focused.panel--archive {
  background:
    linear-gradient(180deg, rgb(100 116 139 / var(--sk-focus-tint)), rgb(100 116 139 / var(--sk-focus-tint-end))),
    #f8fafc;
}

body .shell.shell--section-focus > .panel--focused.panel--new-lead,
body .shell.shell--section-focus > .panel--focused.panel--active-leads,
body .shell.shell--section-focus > .panel--focused.panel--closed-leads {
  background:
    linear-gradient(180deg, rgb(29 78 216 / var(--sk-focus-tint)), rgb(29 78 216 / var(--sk-focus-tint-end))),
    #f8fafc;
}

/* Level 3: concrete Lead action screen returns to Lead-blue identity. Opaque base prevents bleed-through. */
body .shell .lead-card {
  --sk-record-accent: var(--sk-lead-accent);
  --sk-record-soft: var(--sk-lead-soft);
  --sk-record-rgb: 29 78 216;
}

body .shell .lead-card--actions-screen {
  background:
    linear-gradient(180deg, rgb(29 78 216 / var(--sk-record-screen-tint)), rgb(29 78 216 / var(--sk-record-screen-tint-end))),
    #f8fafc;
}

body .lead-card--action .reason--action {
  color: var(--sk-attention-accent);
}