/* Color architecture: primitives → semantic roles → component tokens. */
:root{
  /* primitives */
  --slate-950:#020617;--slate-900:#0f172a;--slate-700:#334155;--slate-600:#475569;--slate-500:#64748b;--slate-300:#cbd5e1;--slate-200:#e2e8f0;--slate-100:#f1f5f9;--slate-50:#f8fafc;
  --violet-700:#6d28d9;--violet-600:#7c3aed;--violet-500:#8b5cf6;--violet-100:#ede9fe;--violet-50:#f5f3ff;
  --lime-700:#4d7c0f;--lime-100:#ecfccb;--sky-700:#0369a1;--sky-100:#e0f2fe;--green-700:#15803d;--green-100:#dcfce7;--pink-700:#be185d;--pink-100:#fce7f3;
  /* semantic */
  --surface-default:var(--slate-50);--surface-elevated:#fff;--surface-subtle:var(--slate-100);--text-primary:var(--slate-900);--text-secondary:var(--slate-600);--text-tertiary:var(--slate-500);--border-default:var(--slate-200);--border-strong:var(--slate-300);--interactive-default:var(--violet-600);--interactive-hover:var(--violet-700);--interactive-soft:var(--violet-50);--focus-ring:var(--violet-500);--status-success:var(--green-700);--status-warning:var(--lime-700);--status-info:var(--sky-700);--status-error:var(--pink-700);
  /* component */
  --button-primary-bg:var(--interactive-default);--button-primary-hover:var(--interactive-hover);--button-secondary-bg:var(--surface-elevated);--card-bg:var(--surface-elevated);--timeline-active:var(--interactive-default);--player-bg:var(--slate-950);--player-text:var(--slate-100);
}
body:not(.contrast){background:var(--surface-default);color:var(--text-primary)}
body:not(.contrast) .sidebar,body:not(.contrast) .inspector,body:not(.contrast) .segment,body:not(.contrast) .overview-card,body:not(.contrast) .template-sheet,body:not(.contrast) .template-card{background:var(--surface-elevated);border-color:var(--border-default)}
body:not(.contrast) .sidebar,body:not(.contrast) .inspector,body:not(.contrast) .topbar{border-color:var(--border-default)}
body:not(.contrast) .description,body:not(.contrast) .timeline-header p,body:not(.contrast) .segment-sub,body:not(.contrast) .template-intro,body:not(.contrast) .landing-intro{color:var(--text-secondary)}
body:not(.contrast) .eyebrow,body:not(.contrast) .overview-item span,body:not(.contrast) form label{color:var(--text-tertiary)}
body:not(.contrast) .sidebar nav a{color:var(--text-secondary)}body:not(.contrast) .sidebar nav .active{background:var(--interactive-soft);color:var(--violet-700)}
body:not(.contrast) .run-button,body:not(.contrast) .apply-button{background:var(--button-primary-bg);box-shadow:none}body:not(.contrast) .run-button:hover,body:not(.contrast) .apply-button:hover{background:var(--button-primary-hover)}
body:not(.contrast) .add-button{background:var(--surface-subtle);color:var(--text-primary);border:1px solid var(--border-default)}body:not(.contrast) .add-button:hover{background:var(--slate-200)}
body:not(.contrast) .outline-button,body:not(.contrast) .icon-button,body:not(.contrast) .share-button,body:not(.contrast) .more-button{background:var(--button-secondary-bg);border-color:var(--border-default);color:var(--text-secondary)}
body:not(.contrast) .segment.selected{border-color:var(--timeline-active);box-shadow:0 0 0 2px var(--violet-100)}body:not(.contrast) .segment:hover{border-color:var(--border-strong);box-shadow:none}
body:not(.contrast) input:focus,body:not(.contrast) textarea:focus,body:not(.contrast) select:focus{border-color:var(--focus-ring);box-shadow:0 0 0 3px var(--violet-100)}
body:not(.contrast) button:focus-visible,body:not(.contrast) a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* Color is secondary information: all category cards retain their icon and text label. */
body:not(.contrast) .segment[data-type="activity"]{}body:not(.contrast) .warning{background:var(--surface-subtle);border-color:var(--border-default)}
body:not(.contrast) .player,body:not(.contrast) .complete{background:var(--player-bg);color:var(--player-text)}body:not(.contrast) .player:after{background:var(--violet-600);opacity:.13}body:not(.contrast) .player-main p,body:not(.contrast) .progress-wrap>div:last-child{color:var(--slate-300)}body:not(.contrast) .player-meta,body:not(.contrast) .player-meta .dot{color:#c4b5fd}body:not(.contrast) .live-chip i{background:#bef264}body:not(.contrast) .player-controls .play-button{color:var(--slate-950)}body:not(.contrast) .complete-mark{background:var(--lime-100);color:var(--lime-700)}
body:not(.contrast) .landing-plate{background:linear-gradient(135deg,var(--slate-50),#fff 52%,var(--violet-50))}body:not(.contrast) .landing-choice{border-color:var(--border-default)}body:not(.contrast) .landing-choice:hover{border-color:var(--focus-ring);box-shadow:0 12px 24px #7c3aed12}
/* High contrast retains its explicit black-and-white implementation in extras.css. */