/*
 * 4P3X SafeSpark™ central colour system
 * Version 30.0.0 — complete deep-teal visual migration
 * Presentation-only layer: routes, data, storage, role logic and offline architecture are unchanged.
 */
:root {
  color-scheme: dark;

  /* SafeSpark™ primary brand */
  --ss-primary: #0F766E;
  --ss-primary-rgb: 15, 118, 110;
  --ss-primary-hover: #115E59;
  --ss-primary-active: #134E4A;
  --ss-primary-soft: #CCFBF1;
  --ss-primary-subtle: #F0FDFA;
  --ss-primary-border: #5EEAD4;

  /* Dark interface surfaces */
  --ss-bg-dark: #090E18;
  --ss-bg-dark-secondary: #111827;
  --ss-bg-dark-elevated: #172033;
  --ss-bg-dark-soft: #1F2937;

  /* Light interface surfaces */
  --ss-bg-light: #F8FAFC;
  --ss-bg-white: #FFFFFF;
  --ss-bg-muted: #F1F5F9;

  /* Text */
  --ss-text-on-dark: #F8FAFC;
  --ss-text-on-dark-muted: #CBD5E1;
  --ss-text-main: #172033;
  --ss-text-muted: #475569;
  --ss-text-subtle: #64748B;

  /* Borders and dividers */
  --ss-border-light: #D8E2E8;
  --ss-border-dark: #334155;
  --ss-divider-light: #E2E8F0;
  --ss-divider-dark: #253247;

  /* Focus and interaction */
  --ss-focus: #14B8A6;
  --ss-focus-outer: rgba(20, 184, 166, 0.32);
  --ss-hover-soft: rgba(15, 118, 110, 0.10);
  --ss-active-soft: rgba(15, 118, 110, 0.18);

  /* Restricted metallic-gold brand detail */
  --ss-gold: #C9A84C;
  --ss-gold-light: #E4CD82;
  --ss-gold-dark: #8A6A20;

  /* Clearly labelled 4P3X AI™ components only */
  --ss-ai-purple: #7C3AED;
  --ss-ai-purple-soft: rgba(124, 58, 237, 0.12);

  /* Semantic status colours */
  --ss-success: #15803D;
  --ss-success-soft: #DCFCE7;
  --ss-warning: #B45309;
  --ss-warning-soft: #FEF3C7;
  --ss-danger: #B91C1C;
  --ss-danger-soft: #FEE2E2;
  --ss-info: #0369A1;
  --ss-info-soft: #E0F2FE;

  /* Shadows */
  --ss-shadow-soft: 0 10px 30px rgba(2, 8, 23, 0.10);
  --ss-shadow-dark: 0 14px 38px rgba(0, 0, 0, 0.32);

  /* Compatibility aliases for established SafeSpark components */
  --bg: var(--ss-bg-dark);
  --bg-soft: var(--ss-bg-dark-secondary);
  --panel: var(--ss-bg-dark-secondary);
  --panel2: var(--ss-bg-dark-elevated);
  --panel-2: var(--ss-bg-dark-elevated);
  --text: var(--ss-text-on-dark);
  --muted: var(--ss-text-on-dark-muted);
  --silver: var(--ss-text-on-dark-muted);
  --line: var(--ss-border-dark);
  --green: var(--ss-primary);
  --purple: var(--ss-primary);
  /* Legacy gold was widely used as an action colour; map it to teal. Gold now uses --ss-gold explicitly. */
  --gold: var(--ss-primary);
  --amber: var(--ss-warning);
  --danger: var(--ss-danger);
  --focus: 0 0 0 3px var(--ss-bg-dark), 0 0 0 6px var(--ss-focus);
  --shadow: var(--ss-shadow-dark);
}

/* ---------- Global surfaces and typography ---------- */
html {
  background: var(--ss-bg-dark);
  color: var(--ss-text-on-dark);
  accent-color: var(--ss-primary);
}
body {
  background:
    radial-gradient(circle at 82% 2%, rgba(15, 118, 110, 0.14), transparent 30rem),
    linear-gradient(180deg, var(--ss-bg-dark), #0C1422 52%, var(--ss-bg-dark)) !important;
  color: var(--ss-text-on-dark);
}
body::before, body::after { filter: none; }
p, small, .muted, .supporting-copy, .help-text, .description { color: var(--ss-text-on-dark-muted); }
a { text-underline-offset: .18em; }
a:not(.btn):not(.button):not(.app-button):not(.nav-button):not(.brand):not(.logo):not([class*="card"]) {
  text-decoration-color: rgba(94, 234, 212, .55);
}

/* ---------- Accessible focus ---------- */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"]):focus-visible {
  outline: 3px solid var(--ss-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px var(--ss-focus-outer) !important;
}
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) { outline: none; }
.skip, .skip-link, .skipLink {
  background: var(--ss-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--ss-primary-border) !important;
}

/* ---------- Header and navigation ---------- */
:where(.topbar, .site-header, .public-header, .app-header, header[role="banner"], body > header) {
  background: rgba(9, 14, 24, .96) !important;
  border-bottom-color: var(--ss-divider-dark) !important;
  color: var(--ss-text-on-dark) !important;
}
:where(.nav a, .site-nav a, .public-nav a, .nav-button, .menu-link, .mobile-nav a) {
  color: var(--ss-text-on-dark-muted);
}
:where(.nav a:hover, .nav a[aria-current="page"], .site-nav a:hover, .site-nav a[aria-current="page"],
       .public-nav a:hover, .public-nav a[aria-current="page"], .nav-button:hover,
       .nav-button[aria-current="page"], .menu-link:hover, .menu-link[aria-current="page"]) {
  color: var(--ss-text-on-dark) !important;
  background: var(--ss-active-soft) !important;
  border-color: rgba(94, 234, 212, .52) !important;
}
:where(.menuBtn, .menu-toggle, .hamburger, [aria-controls*="menu" i]) {
  background: var(--ss-bg-dark-elevated) !important;
  color: var(--ss-text-on-dark) !important;
  border-color: var(--ss-border-dark) !important;
}
:where(.nav.open, .mobile-menu, .public-menu, .demo-menu, .side-nav, .drawer, .menu-panel) {
  background: var(--ss-bg-dark-secondary) !important;
  border-color: var(--ss-border-dark) !important;
}
:where(.backdrop, .menu-backdrop, .modal-backdrop) { background: rgba(2, 8, 23, .74) !important; }

/* ---------- Hero and section surfaces ---------- */
:where(.hero, .pageHero, .public-hero, .hero-section, .intro) {
  background-color: transparent;
}
:where(.heroText, .sparkCard, .pageHero > div, .hero-card, .hero-panel, .hero-copy, .hero-visual,
       .public-hero__copy, .public-hero__preview, .role-preview, .dashboard-preview) {
  background: linear-gradient(150deg, rgba(23, 32, 51, .98), rgba(9, 14, 24, .98)) !important;
  border-color: var(--ss-border-dark) !important;
  box-shadow: var(--ss-shadow-dark) !important;
}
:where(.hero h1, .pageHero h1, .public-hero h1, .intro h1) {
  color: var(--ss-text-on-dark) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
:where(.eyebrow, .kicker, .section-label, .overline) { color: var(--ss-primary-border) !important; }
:where(.lead, .hero-lead, .hero-copy p, .intro p) { color: var(--ss-text-on-dark-muted) !important; }

/* ---------- Buttons and action hierarchy ---------- */
:where(.btn, .button, .linkBtn, .app-button, .nav-button, .icon-button, button, [role="button"]) {
  min-height: 44px;
  border-color: var(--ss-border-dark);
  color: var(--ss-text-on-dark);
}
:where(.btn.primary, .button.primary, .button-primary, .primary-btn, .primary-cta, .cta-primary,
       .app-button.primary, button.primary, [data-variant="primary"], [data-kind="primary"]) {
  background: var(--ss-primary) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--ss-primary) !important;
  box-shadow: none !important;
}
:where(.btn.primary, .button.primary, .button-primary, .primary-btn, .primary-cta, .cta-primary,
       .app-button.primary, button.primary, [data-variant="primary"], [data-kind="primary"]):hover {
  background: var(--ss-primary-hover) !important;
  border-color: var(--ss-primary-hover) !important;
  transform: translateY(-1px);
}
:where(.btn.primary, .button.primary, .button-primary, .primary-btn, .primary-cta, .cta-primary,
       .app-button.primary, button.primary, [data-variant="primary"], [data-kind="primary"]):active {
  background: var(--ss-primary-active) !important;
  border-color: var(--ss-primary-active) !important;
  transform: none;
}
:where(.btn.secondary, .button.secondary, .button-secondary, .secondary-btn, .secondary-cta,
       .cta-secondary, .btn.ghost, .app-button.soft, [data-variant="secondary"]) {
  background: transparent !important;
  color: var(--ss-primary-border) !important;
  border: 1px solid var(--ss-primary-border) !important;
  box-shadow: none !important;
}
:where(.btn.secondary, .button.secondary, .button-secondary, .secondary-btn, .secondary-cta,
       .cta-secondary, .btn.ghost, .app-button.soft, [data-variant="secondary"]):hover {
  background: var(--ss-hover-soft) !important;
  color: var(--ss-text-on-dark) !important;
}
:where(button, .btn, .button, .app-button)[disabled],
:where(button, .btn, .button, .app-button)[aria-disabled="true"] {
  opacity: .58 !important;
  cursor: not-allowed !important;
  filter: saturate(.45);
}
:where(.btn.danger, .button.danger, .app-button.danger, [data-status="danger"]) {
  color: #FECACA !important;
  border-color: rgba(185, 28, 28, .72) !important;
  background: rgba(185, 28, 28, .16) !important;
}

/* ---------- Cards, panels and selected states ---------- */
:where(.panel, .card, .stat, .metric, .moduleCard, .toolCard, .lessonCard, .teacherRow,
       .learner-card, .session-card, .record-card, .preview-card, .summary-card,
       .role-card, .flow-card, .feature-card, .support-card, .dashboard-card,
       .scene-panel, .scene-nav, .speech-dock, .practice-card, .lesson-preview,
       .quick-sheet, .modal, dialog, .childShell) {
  background: linear-gradient(145deg, var(--ss-bg-dark-elevated), var(--ss-bg-dark-secondary)) !important;
  border-color: var(--ss-border-dark) !important;
  box-shadow: var(--ss-shadow-dark);
}
:where(.card.selected, .role-card.selected, .role-card[aria-selected="true"],
       .selected-card, [aria-current="step"], [aria-selected="true"],
       .tab.active, .tab[aria-selected="true"], .scene-nav li.active button) {
  background: var(--ss-active-soft) !important;
  border-color: var(--ss-primary-border) !important;
  color: var(--ss-text-on-dark) !important;
}
:where(.tab, [role="tab"], .chip, .badge, .pill, .status-chip) {
  background: rgba(255, 255, 255, .04);
  border-color: var(--ss-border-dark);
  color: var(--ss-text-on-dark-muted);
}
:where(.tab.active, [role="tab"][aria-selected="true"], .chip.active, .badge.active) {
  background: var(--ss-primary) !important;
  border-color: var(--ss-primary) !important;
  color: #FFFFFF !important;
}

/* ---------- Forms and controls ---------- */
:where(input, select, textarea, .input, .select, .textarea) {
  background: var(--ss-bg-dark) !important;
  color: var(--ss-text-on-dark) !important;
  border-color: var(--ss-border-dark) !important;
}
:where(input, select, textarea):hover { border-color: #475569 !important; }
:where(input, select, textarea):focus {
  border-color: var(--ss-focus) !important;
}
:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
  accent-color: var(--ss-primary) !important;
}
:where(.toggle[aria-checked="true"], .switch input:checked + *, [role="switch"][aria-checked="true"]) {
  background: var(--ss-primary) !important;
  border-color: var(--ss-primary-border) !important;
}
::placeholder { color: #94A3B8; opacity: 1; }

/* ---------- Learning, pupil and VexSpark™ ---------- */
:where(.childMission, .help-panel, .vex-box, .vex-panel, .vexspark-panel, .support-panel,
       .confidence-panel, .learning-support, .active-support-plan) {
  background: rgba(15, 118, 110, .12) !important;
  border-color: rgba(94, 234, 212, .38) !important;
}
:where(.lessonNum, .step-number, .progress-step.active, .lesson-step.current) {
  background: var(--ss-primary) !important;
  border-color: var(--ss-primary-border) !important;
  color: #FFFFFF !important;
}
:where(.bar span, progress::-webkit-progress-value, .progress-fill, .progress-bar > span) {
  background: var(--ss-primary) !important;
}
:where(.confidence-options button[aria-pressed="true"], .confidence-grid button[aria-pressed="true"]) {
  background: var(--ss-active-soft) !important;
  border-color: var(--ss-primary-border) !important;
  color: var(--ss-text-on-dark) !important;
}

/* ---------- Genuine semantic status colours ---------- */
:where(.good, .success-text, .status-success, .error-free) { color: #86EFAC !important; }
:where(.badge.done, .chip.good, .success, .success-box, [data-status="success"], [data-state="complete"]) {
  color: #DCFCE7 !important;
  background: rgba(21, 128, 61, .18) !important;
  border-color: rgba(34, 197, 94, .52) !important;
}
:where(.warning, .warn, .status-warning, .chip.review, [data-status="warning"], [data-state="overdue"]) {
  color: #FDE68A !important;
  background: rgba(180, 83, 9, .18) !important;
  border-color: rgba(245, 158, 11, .55) !important;
}
:where(.bad, .error, .danger-text, .status-danger, [data-status="danger"], [data-status="error"],
       [data-state="risk"], [data-state="safeguarding"]) {
  color: #FCA5A5 !important;
}
:where(.danger, .error-box, .safeguarding-alert, [role="alert"]) {
  border-color: rgba(239, 68, 68, .58) !important;
}
:where(.info, .info-box, .status-info, [data-status="info"]) {
  color: #BAE6FD !important;
  background: rgba(3, 105, 161, .18) !important;
  border-color: rgba(14, 165, 233, .50) !important;
}

/* ---------- Restricted gold and explicit 4P3X AI™ identity ---------- */
:where(.brand img, .logo img, img[alt*="SafeSpark" i], img[src*="safespark-logo" i], img[src*="logo-mark" i]) {
  filter: none !important;
}
:where(.logoMark, .brand-mark, .achievement-gold, .certificate-seal, .premium-divider) {
  color: #111827;
  background: linear-gradient(135deg, var(--ss-gold-light), var(--ss-gold)) !important;
  border-color: var(--ss-gold-dark) !important;
}
:where(.apex-ai, .four-p3x-ai, [data-brand="4p3x-ai"], [data-product="4p3x-ai"], .ai-branded) {
  --purple: var(--ss-ai-purple);
  border-color: rgba(124, 58, 237, .48) !important;
}
:where(.apex-ai, .four-p3x-ai, [data-brand="4p3x-ai"], [data-product="4p3x-ai"], .ai-branded) .accent {
  color: #C4B5FD !important;
}

/* ---------- Tables, charts and dashboard reporting ---------- */
:where(table, .table, .tableWrap) { border-color: var(--ss-border-dark); }
:where(th) { color: var(--ss-primary-border) !important; }
:where(th, td) { border-bottom-color: var(--ss-divider-dark) !important; }
:where(.chart-legend [data-series="1"], .chart-series-1) { color: var(--ss-primary); }
:where(.chart-legend [data-series="2"], .chart-series-2) { color: #2DD4BF; }
:where(.chart-legend [data-series="3"], .chart-series-3) { color: #64748B; }
:where(.chart-legend [data-series="4"], .chart-series-4) { color: #7DD3FC; }
:where(.chart-legend [data-series="5"], .chart-series-5) { color: var(--ss-gold); }

/* ---------- Light documents and approved light panels ---------- */
:where(.worksheetSheet, .certificate, .print-document, [data-theme="light"], .light-surface) {
  color-scheme: light;
  background: var(--ss-bg-white) !important;
  color: var(--ss-text-main) !important;
  border-color: var(--ss-border-light) !important;
  box-shadow: var(--ss-shadow-soft) !important;
}
:where(.worksheetSheet, .certificate, .print-document, [data-theme="light"], .light-surface) :where(p, small, li) {
  color: var(--ss-text-muted) !important;
}
:where(.worksheetSheet, .certificate, .print-document, [data-theme="light"], .light-surface) :where(h1, h2, h3, h4, strong, label) {
  color: var(--ss-text-main) !important;
}
:where(.worksheetSheet, .certificate, .print-document, [data-theme="light"], .light-surface) :where(input, select, textarea) {
  background: var(--ss-bg-white) !important;
  color: var(--ss-text-main) !important;
  border-color: var(--ss-border-light) !important;
}

/* ---------- SVG and icon consistency ---------- */
:where(button, a:not(.brand), .icon, .nav-button, .app-button) svg:not(.preserve-colour) {
  color: currentColor;
}
:where(button, a:not(.brand), .icon, .nav-button, .app-button) svg:not(.preserve-colour) [fill]:not([fill="none"]) {
  fill: currentColor !important;
}
:where(button, a:not(.brand), .icon, .nav-button, .app-button) svg:not(.preserve-colour) [stroke]:not([stroke="none"]) {
  stroke: currentColor !important;
}

/* ---------- Restraint: remove old decorative colour cycling/glows ---------- */
:where(.sparkOrb, .decorative-orb, .glow, .hero-glow, .ambient-glow) {
  background: linear-gradient(135deg, var(--ss-primary), var(--ss-primary-hover)) !important;
  box-shadow: 0 0 34px rgba(15, 118, 110, .20) !important;
  color: #FFFFFF !important;
}
:where(.displayApp, .displayFrame) {
  background-image: linear-gradient(135deg, rgba(15, 118, 110, .10), transparent 38%) !important;
  border-color: var(--ss-border-dark) !important;
}

/* ---------- High contrast, reduced motion and responsive safeguards ---------- */
@media (prefers-contrast: more) {
  :root { --ss-border-dark: #64748B; --ss-text-on-dark-muted: #E2E8F0; }
  :where(.btn, .button, button, input, select, textarea, .card, .panel) { border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 760px) {
  :where(.nav.open, .mobile-menu, .public-menu) {
    background: var(--ss-bg-dark-secondary) !important;
    border-color: var(--ss-primary-border) !important;
  }
  :where(.btn, .button, .app-button, button) { min-height: 46px; }
}
@media print {
  body { background: #FFFFFF !important; color: #111827 !important; }
  :where(.worksheetSheet, .certificate, .print-document, .panel) {
    background: #FFFFFF !important;
    color: #111827 !important;
    border-color: #CBD5E1 !important;
    box-shadow: none !important;
  }
}


/* ---------- SafeSpark role-App and dashboard families ---------- */
:where(.roleCleanTop, .rolePortalHeader, .publicTopbar, .demoSceneTopbar) {
  background: rgba(9, 14, 24, .96) !important;
  border-color: var(--ss-divider-dark) !important;
}
:where(.roleButton, .safespark-guide-button, .demoOptionButton, .method-buttons button,
       .speech-controls button, .suggested-questions button, .learning-step,
       .guidedCastToolbar button, .guidedCastReceiverControls button) {
  min-height: 44px;
  background: var(--ss-bg-dark-elevated) !important;
  color: var(--ss-text-on-dark) !important;
  border: 1px solid var(--ss-border-dark) !important;
  box-shadow: none !important;
}
:where(.roleButton, .safespark-guide-button, .demoOptionButton, .method-buttons button,
       .speech-controls button, .suggested-questions button, .learning-step):hover {
  background: var(--ss-hover-soft) !important;
  border-color: var(--ss-primary-border) !important;
}
:where(.roleButton.primary, .roleButton[data-primary="true"], .safespark-guide-button.primary,
       .demoOptionButton.primary, .guidedCastToolbar .primary) {
  background: var(--ss-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--ss-primary) !important;
}
:where(.rolePanel, .roleHeroCard, .roleHomeCard, .roleCard, .roleChooserCard,
       .finalPolishCard, .finalPolishPanel, .finalPolishKpi, .investorCard, .metricCard,
       .statusCard, .testedCard, .roadmapCard, .infoPanel, .warningPanel,
       .homePracticeCard, .homePracticeDevice, .homePracticeScreen, .homePracticeImport,
       .schoolOpsHeroCard, .schoolOpsHeroAside, .schoolOpsModule, .schoolOpsMetric,
       .schoolOpsTask, .schoolOpsBoardCard, .schoolOpsAgent, .schoolOpsDetailBox,
       .schoolOpsPriorityPanel, .schoolOpsCommandBoard, .schoolOpsScenarioDisplay,
       .guidedCastPanel, .guidedCastPreview, .guidedCastDisplayCard, .guidedCastQuestion,
       .richDemoCard, .richDemoKpi, .richDemoPromptBox, .richDemoExpansion,
       .safeSparkGuidePanel, .safespark-guide-panel, .safespark-guide-info-card,
       .fullRoleLessonCard, .pupilLoginCard, .adminAccessCard, .dataBoundaryNotice) {
  background: linear-gradient(145deg, var(--ss-bg-dark-elevated), var(--ss-bg-dark-secondary)) !important;
  border-color: var(--ss-border-dark) !important;
  box-shadow: var(--ss-shadow-dark) !important;
}
:where(.roleCard.selected, .roleChooserCard.selected, .roleHomeCard.selected,
       .roleTab.active, .roleButton.active, .schoolOpsModule.active,
       .homePracticeSubject.active, .demoOptionButton.selected) {
  background: var(--ss-active-soft) !important;
  border-color: var(--ss-primary-border) !important;
  color: var(--ss-text-on-dark) !important;
}
:where(.rolePill, .schoolOpsPill, .homePracticeBadge, .richDemoBadge,
       .capabilityBadge, .safespark-guide-chip, .safespark-next-step-badge) {
  background: rgba(255, 255, 255, .04) !important;
  border-color: var(--ss-border-dark) !important;
  color: var(--ss-text-on-dark-muted) !important;
}
:where(.scopeNotice, .fictionalNotice, .legacyDemoNotice, .shortSpeechNotice,
       .finalPolishNoticeBar, .notice:not(.warning):not(.danger), .safeNotice) {
  background: rgba(15, 118, 110, .10) !important;
  border-color: rgba(94, 234, 212, .36) !important;
  color: var(--ss-text-on-dark-muted) !important;
}

/* ---------- Refined homepage and public storytelling ---------- */
:where(.ecosystem-ring, .hero-orbit) {
  border-color: rgba(94, 234, 212, .26) !important;
  box-shadow: inset 0 0 70px rgba(15, 118, 110, .08), 0 0 70px rgba(15, 118, 110, .05) !important;
}
:where(.ecosystem-ring::before, .ecosystem-ring::after) { border-color: rgba(94, 234, 212, .24) !important; }
:where(.ecosystem-core, .ecosystem-node, .interface-preview, .send-dashboard-preview,
       .learning-preview, .role-journey article, .explore-link-grid a, .trust-panel, .pilot-panel) {
  background: linear-gradient(145deg, var(--ss-bg-dark-elevated), var(--ss-bg-dark-secondary)) !important;
  border-color: var(--ss-border-dark) !important;
  box-shadow: var(--ss-shadow-dark) !important;
}
:where(.ecosystem-node, .node-pupil, .node-teacher, .node-send, .node-leadership, .node-parent,
       .role-snapshot > span, .role-snapshot:nth-child(2) > span, .role-snapshot:nth-child(3) > span,
       .role-snapshot:nth-child(4) > span, .role-snapshot:nth-child(5) > span,
       .journey-number, .flow-step::before, .flow-step::after, .role-journey li::after,
       .safety-control-grid article > span, .compact-feature-list li::before,
       .feature-list li::before, .plain-list li::before) {
  color: var(--ss-primary-border) !important;
}
:where(.benefit-icon, .benefit:nth-child(2) .benefit-icon, .benefit:nth-child(3) .benefit-icon,
       .safeguarding-control-list article > span) {
  background: var(--ss-active-soft) !important;
  color: var(--ss-primary-border) !important;
}
:where(.learning-step[aria-pressed="true"], .preview-side span.active) {
  background: var(--ss-active-soft) !important;
  border-color: var(--ss-primary-border) !important;
  box-shadow: inset 4px 0 0 var(--ss-primary) !important;
}
:where(.learning-step-number) {
  background: var(--ss-active-soft) !important;
  color: var(--ss-primary-border) !important;
}
:where(.preview-step) {
  background: rgba(15, 118, 110, .08) !important;
  border-left-color: var(--ss-primary) !important;
}
:where(.preview-chip, .send-preview-status) {
  color: var(--ss-primary-border) !important;
  border-color: rgba(94, 234, 212, .42) !important;
}
:where(.preview-label) { color: var(--ss-primary-border) !important; }
:where(.explore-link-grid a:hover, .explore-link-grid a:focus-visible) {
  background: var(--ss-hover-soft) !important;
  border-color: var(--ss-primary-border) !important;
}

/* Safeguarding states are semantic, not decorative. */
:where(.emergency-panel, .safeguarding-alert) {
  background: rgba(185, 28, 28, .14) !important;
  border-color: rgba(239, 68, 68, .64) !important;
  border-left-color: var(--ss-danger) !important;
}
:where(.safeguarding-not-grid p, .staff-banner) {
  background: rgba(180, 83, 9, .14) !important;
  border-color: rgba(245, 158, 11, .52) !important;
}

/* SEND App workflow: teal for active workflow, semantic colours for actual states. */
:where(.app-button.purple, .notice.purple, .chip.purple, .timeline-item::before,
       .lesson-step, .timeline-item) {
  --purple: var(--ss-primary);
  border-color: rgba(94, 234, 212, .40) !important;
}
:where(.app-button.gold):not(.warning):not([data-status="warning"]) {
  background: transparent !important;
  color: var(--ss-primary-border) !important;
  border-color: var(--ss-primary-border) !important;
}
:where(.quick-sheet) { border-color: rgba(94, 234, 212, .45) !important; }

/* Keep logo-adjacent premium detail genuinely gold while routine legacy gold maps to teal. */
:where(.brand small, .roleCleanBrand small) { color: var(--ss-gold-light) !important; }