/* Pearl dark (B27 #63). Follows the phone's setting unless the person picks Light or Dark under
   More → Appearance (web/theme.js sets html[data-theme]). Loaded last so it wins over the light
   rules it mirrors. One deep-blue motif, lifted for dark surfaces; film keeps its own colours. */
html[data-theme="dark"][data-design="pearl"] {
  --ink: #eceef2; --muted: #a3aab7; --paper: #111318; --line: #2b303a;
  --green: #c6d4ee; --gold: #e3b56d; --gold-light: #3a2f1d; --danger: #ff8a92;
  --accent: #8ab6ff; --accent-deep: #b3cfff; --accent-soft: #1b2840;
  --pearl-surface: linear-gradient(155deg, #1a1d23, #171a1f);
  --pearl-shadow: 0 1px 2px #00000040, 0 12px 32px -24px #000000c0;
  --pearl-action: linear-gradient(#2d6ee0, #1c55bd);
  --motion-line: #2b303a;
  background: var(--paper); color-scheme: dark;
}
html[data-theme="dark"][data-design="pearl"] body { background: linear-gradient(180deg, #14161b, #111318 480px); background-attachment: fixed; color: var(--ink); }
html[data-theme="dark"][data-design="pearl"] :is(.shell,.motion-app,.motion-auth) { --motion-line: #2b303a; color: var(--ink); }
html[data-theme="dark"][data-design="pearl"] :is(h1,h2,h3,h4,strong,legend,label,summary,dt,th) { color: var(--ink); }
html[data-theme="dark"][data-design="pearl"] a { color: var(--accent); }

/* Shells that set their own light tokens */
html[data-theme="dark"][data-design="pearl"] .consumer-shell { --ink: #eceef2; --muted: #a3aab7; --line: #2b303a; }
html[data-theme="dark"][data-design="pearl"] .motion-auth-intro h1 { color: #eef1f6; }
html[data-theme="dark"][data-design="pearl"] .motion-auth-intro h1 span { color: var(--accent); }

/* Header, navigation and the More menu */
html[data-theme="dark"][data-design="pearl"] .shell .sidebar { background: #14171cd9; border-bottom-color: #262a33; box-shadow: none; }
html[data-theme="dark"][data-design="pearl"] :is(.brand-wordmark,.motion-brand span) { color: #eef1f6; }
html[data-theme="dark"][data-design="pearl"] :is(.shell .brand img,.motion-brand img) { filter: brightness(0) invert(1); }
html[data-theme="dark"][data-design="pearl"] .shell .nav { background: #1b1f26cc; border-color: #2b303a; }
html[data-theme="dark"][data-design="pearl"] .shell .nav button { color: #a6afbf; }
html[data-theme="dark"][data-design="pearl"] .shell .nav button.active { background: #252a33; border-color: #343b47; color: var(--accent); box-shadow: none; }
html[data-theme="dark"][data-design="pearl"] .account-avatar { background: linear-gradient(150deg, #4a5566, #262d38); box-shadow: inset 0 1px 1px #ffffff22; }
html[data-theme="dark"][data-design="pearl"] .tools-popover { background: #1a1d23f7; border-color: #2c313b; box-shadow: 0 16px 44px #00000080; }
html[data-theme="dark"][data-design="pearl"] .tools-popover :is(button,a) { color: var(--ink); }
html[data-theme="dark"][data-design="pearl"] .tools-popover :is(button,a):hover { background: #252a33; }
html[data-theme="dark"][data-design="pearl"] :is(.tools-heading,.tools-identity) { color: var(--muted); }
html[data-theme="dark"][data-design="pearl"] :is(.tools-group+.tools-group,.tools-account) { border-top-color: #2b303a; }
html[data-theme="dark"][data-design="pearl"] .tools-popover .tools-account { background: #1a1d23; }
@media (max-width: 760px) {
  html[data-theme="dark"][data-design="pearl"] .shell .sidebar { background: #14171cf2; }
  html[data-theme="dark"][data-design="pearl"] .shell .nav { background: #15181df5; border-top: 1px solid #2b303a; box-shadow: 0 -8px 24px #00000055; }
  html[data-theme="dark"][data-design="pearl"] .shell .nav button.active { background: #232833; }
}

/* Forms, buttons and badges */
html[data-theme="dark"][data-design="pearl"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select) { border-color: #3a404c; background: #15181d; box-shadow: none; color: var(--ink); }
html[data-theme="dark"][data-design="pearl"] :is(input,textarea)::placeholder { color: #7d8594; }
html[data-theme="dark"][data-design="pearl"] .field>span { color: #b9c0cc; }
html[data-theme="dark"][data-design="pearl"] :is(.btn.secondary,.btn.outline,.coaching-button.secondary,.coaching-secondary),
html[data-theme="dark"][data-design="pearl"] #app .shell :is(.btn.outline,.btn.secondary,.coaching-button.secondary,.bm-button.secondary,.bm-button.bm-button-secondary,.kn-button.kn-secondary,.ps-button.ps-secondary,.ps-button.secondary) { background: #1c2028; border-color: #343b47; color: var(--accent); box-shadow: none; }
html[data-theme="dark"][data-design="pearl"] :is(.btn,.motion-primary,.coaching-button,.wb-primary,.knowledge-primary,.positions-primary,.benchmark-primary):not(.secondary):not(.outline):not(.text-btn) { box-shadow: inset 0 1px 0 #ffffff1f, 0 3px 10px #00000055; }
html[data-theme="dark"][data-design="pearl"] .badge { background: #1e2a3e; color: #b4ccf2; }
html[data-theme="dark"][data-design="pearl"] .badge.gold { background: #3a2f1d; color: #f2cd8c; }
html[data-theme="dark"][data-design="pearl"] .badge.gray { background: #262a31; color: #c3c8d1; }
html[data-theme="dark"][data-design="pearl"] .error { color: var(--danger); }

/* Surfaces with fixed light colours in the light theme */
html[data-theme="dark"][data-design="pearl"] .motion-auth-form { border-color: #2b303a; }
html[data-theme="dark"][data-design="pearl"] .context-nav { background: #1b1f26; }
html[data-theme="dark"][data-design="pearl"] .context-nav button[aria-current] { background: #2a303b; color: var(--accent); box-shadow: none; }
html[data-theme="dark"][data-design="pearl"] .pearl-recent-clip { border-color: #2b303a; }
html[data-theme="dark"][data-design="pearl"] :is(.pearl-film-cover,.motion-thumbnail) { background: #1f242c; border-color: #2b303a; }
html[data-theme="dark"][data-design="pearl"] :is(.pearl-source-placeholder,.pearl-no-poster) { background: linear-gradient(140deg, #1f2530, #182030); color: #b6c6de; }
html[data-theme="dark"][data-design="pearl"] .motion-clip-status { background: #183224ef; color: #b6e3c6; border-color: #ffffff1a; }
html[data-theme="dark"][data-design="pearl"] .motion-viewer-toolbar { background: #1a1e25; color: #b6c3d6; border-color: #2b303a; }
html[data-theme="dark"][data-design="pearl"] .motion-drop { background: linear-gradient(145deg, #1a1f27, #15181d); border-color: #333a46; box-shadow: none; }
html[data-theme="dark"][data-design="pearl"] .motion-upload-symbol { background: #1f2c42; color: #a9c6f5; box-shadow: none; }
html[data-theme="dark"][data-design="pearl"] .journey-path li>span { background: #1f242c; border-color: #3a404c; color: #b2bdcf; }
html[data-theme="dark"][data-design="pearl"] .journey-path li.current>span { box-shadow: 0 0 0 3px #1d3560; }
html[data-theme="dark"][data-design="pearl"] :is(.kn-card,.kn-teaching-card,.ps-surface,.bm-surface,.bm-drill-card,.dataset-card,.source-card,.import-card,.metric-card,.insights-panel) { border-color: #2b303a; }
html[data-theme="dark"][data-design="pearl"] :is(details,.journey-detail) > summary { color: var(--accent); }
html[data-theme="dark"][data-design="pearl"] :is(hr) { border-color: var(--line); }
html[data-theme="dark"][data-design="pearl"] #toast { background: #2a303b; color: #f1f3f7; }

/* Secondary text that the light theme fixes at a mid grey (found by the contrast sweep) */
html[data-theme="dark"][data-design="pearl"] :is(.muted,.small.muted,.session-footnote,.feedback-byline,.task-description,.journey-path li,.coaching-timezone,.coaching-empty p,.motion-library-empty p,.coaching-drills-link p,.coaching-today-card p,.family-heading>span,.family-note,.family-check small,.family-changes li small) { color: var(--muted); }
html[data-theme="dark"][data-design="pearl"] .journey-path li.current { color: var(--accent); }
html[data-theme="dark"][data-design="pearl"] .practice-brief > p { color: var(--ink); }
html[data-theme="dark"][data-design="pearl"] .practice-brief details p { color: var(--muted); }
html[data-theme="dark"][data-design="pearl"] .practice-brief summary { color: var(--accent); }
html[data-theme="dark"][data-design="pearl"] :is(.coaching-card,.coaching-empty) { background: var(--pearl-surface); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"][data-design="pearl"] :is(.coaching-drills-link button,.coaching-today-card button) { color: var(--accent); }
html[data-theme="dark"][data-design="pearl"] .coaching-drills-link { border-bottom-color: #2b303a; }
html[data-theme="dark"][data-design="pearl"] .coaching-today-card { background: var(--pearl-surface); border-color: #2b303a; }
html[data-theme="dark"][data-design="pearl"] .family-shell { --text: var(--ink); }
html[data-theme="dark"][data-design="pearl"] .family-waiting { background: #3a2f1d; border-color: #5a4526; color: #f2cd8c; }
html[data-theme="dark"][data-design="pearl"] .family-card { background: var(--pearl-surface); border-color: var(--line); color: var(--ink); }

/* Media-class and claim badges keep their meaning and stay legible */
html[data-theme="dark"] .media-class-source_footage { background: #1b2a45; color: #c0d5ff; }
html[data-theme="dark"] .media-class-expert_annotation { background: #15181d; color: #c0d5ff; border-color: #3d5c93; }
html[data-theme="dark"] .media-class-estimated_reconstruction { background: #23272f; color: #d0d5de; border-color: #3a404c; }
html[data-theme="dark"] .media-class-generated_illustration { background: #3a2f1d; color: #f4d193; }
html[data-theme="dark"] .media-class-unknown { background: #23262c; color: #b8bec8; }
html[data-theme="dark"] .claim-demonstrated { background: #1b2a45; color: #c0d5ff; }
html[data-theme="dark"] .claim-proposed { background: #23272f; color: #d0d5de; }
html[data-theme="dark"] .claim-measured { background: #17301f; color: #b4e4c3; }
html[data-theme="dark"] .claim-open-items { background: #171a1f; border-color: #2b303a; }

/* Field mode: bright sun or a quick glance at the drill card. High contrast, larger text, bigger targets. */
html[data-field="1"][data-design="pearl"] { --muted: #3c4048; --line: #8e95a1; }
html[data-field="1"][data-theme="dark"][data-design="pearl"] { --ink: #ffffff; --muted: #d5d9e0; --line: #6a717d; }
html[data-field="1"][data-design="pearl"] body { font-size: 18px; }
html[data-field="1"][data-design="pearl"] :is(p,li,label,.field>span,.task-description) { font-size: max(1em, 17px); font-weight: 500; }
html[data-field="1"][data-design="pearl"] :is(button,.btn,.motion-primary,select,input:not([type=checkbox]):not([type=radio])) { min-height: 56px; font-size: 17px; }
html[data-field="1"][data-design="pearl"] :is(.today-task,.session-surface,.motion-capture-guide,.bm-drill-card,.benchmark-card,.motion-viewer) { border-width: 2px; border-color: var(--ink); }
html[data-field="1"][data-design="pearl"] :is(.motion-capture-guide,.bm-drill-card,.today-task) :is(h2,h3) { font-size: 28px; }
html[data-field="1"][data-design="pearl"] :is(button,a,summary,input,select,textarea):focus-visible { outline-width: 4px; }