/* Condor palette supplied by the project owner. Load after layout styles. */
:root {
  --sea: #006BAC;
  --sea-deep: #054871;
  --sunshine: #FFA200;
  --sunshine-hover: #E88319;
  --sunshine-active: #D68C00;
  --beach-50: #F7F6F4;
  --beach-100: #E6E3DB;
  --beach-200: #D5D2D0;
  --stone-500: #7D756E;
  --stone-600: #5C5751;
  --stone-700: #4E4A47;
  --ink: #000000;
  --ink-soft: #222222;
  --alert: #C60F13;
  --white: #FFFFFF;

  /* Compatibility with existing layout tokens. */
  --blue: var(--sea);
  --deep: var(--sea-deep);
  --muted: var(--stone-600);
  --paper: var(--white);
  --line: var(--beach-200);
  --green: var(--sea);
  --amber: var(--sunshine);
  color: var(--ink-soft);
  background: var(--white);
}

body { color: var(--ink-soft); }
h2, h3, h4 { color: var(--sea); }
.serif.blue { color: var(--sea); }
.brand { color: var(--ink); }
.brand-divider { background: var(--beach-100); }
.brand-project { color: var(--stone-700); }
.event-label, .event-label span { color: var(--stone-600); }
.event-label b { color: var(--ink); }
.topbar, .bottombar { background: var(--white); border-color: var(--beach-100); }

button:focus-visible, a:focus-visible {
  outline-color: var(--sunshine);
}
.tool-button {
  background: var(--sunshine);
  border-color: var(--sunshine);
  color: var(--ink);
}
.tool-button:hover {
  background: var(--sunshine-hover);
  border-color: var(--sunshine-hover);
}
.tool-button:active {
  background: var(--sunshine-active);
  border-color: var(--sunshine-active);
}
.icon-button { color: var(--stone-500); }
.icon-button:hover, .overview-go:hover { background: var(--beach-100); }
.icon-button:active { background: var(--beach-200); }
.icon-button[aria-expanded=true] { background: var(--beach-50); color: var(--sea); }
.text-button { color: var(--sea); }
.text-button:active { color: var(--sea-deep); }
.footer-hint, #counter { color: var(--stone-600); }
.dot-button::after { background: var(--beach-200); }
.dot-button[aria-current=true]::after { background: var(--sea); }
.dot-button.is-hidden::after { background: transparent; border-color: var(--stone-500); }
.dot-button.is-hidden[aria-current=true]::after { border-color: var(--sea); }

/* White on Sea is used for the opening, demo, closing and agent blocks. */
.slide-blue, .tool-agent, .agent-node { background: var(--sea); color: var(--white); }
.slide-blue h1, .slide-blue h2, .slide-blue h3,
.tool-agent h3, .agent-node h3 { color: var(--white); }
.eyebrow.light, .hero-description, .hero-bottom > span,
.problem-note > .micro-label, .demo-subtitle, .closing-subtitle,
.metric-number, .metric-grid p, .closing-ask > .micro-label,
.closing-ask p, .closing-note, .tool-agent p,
.agent-node .journey-label, .agent-node p { color: var(--white); }
.hero-tag, .tool-agent h3 > span {
  border-color: color-mix(in srgb, var(--white) 55%, transparent);
}
.note-rule, .closing-ask, .metric-grid article {
  border-color: color-mix(in srgb, var(--white) 45%, transparent);
}
.note-rule { background: color-mix(in srgb, var(--white) 45%, transparent); }
.hero-orbit div { border-color: color-mix(in srgb, var(--white) 12%, transparent); }
.stripe-edge {
  background: repeating-linear-gradient(to bottom,
    var(--white) 0 18px, var(--sea-deep) 18px 36px);
}

/* Workflow panels: warm neutral surfaces keep the core agent prominent. */
.journey-node, .journey-route { background: var(--white); border-color: var(--stone-500); }
.ticket-node, .decision-route, .complex-route,
.agent-workspace .complex-route, .journey-send { background: var(--beach-50); }
.agent-node { background: var(--sea); border-color: var(--sea); }
.agent-node { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 15%, transparent); }
.agent-workspace { background: var(--beach-50); border-color: var(--sea); }
.agent-workspace .journey-route { border: 1px solid var(--stone-500); }
.journey-node p, .journey-route p, .journey-send p { color: var(--stone-600); }
.agent-node p { color: var(--white); }
.journey-label { color: var(--stone-600); }
.specialist-end { color: var(--sea-deep); border-color: var(--stone-500); }
.journey-send { border-color: var(--stone-500); }
.journey-send strong { color: var(--ink-soft); }
.signal.auto { background: var(--sea); }
.signal.review { background: var(--sunshine); }
.signal.expert { background: var(--sea-deep); }

/* Agent tools and reviewable output. */
.agent-tool, .tool-policy-gate { border-color: var(--beach-100); }
.agent-tool p, .tool-policy-gate p { color: var(--stone-600); }
.tool-policy-gate { background: var(--beach-50); border-left-color: var(--sea); }
#technical .agent-output { background: var(--white); border-color: var(--beach-200); }
#technical .agent-output .record-header { background: var(--beach-50); color: var(--sea); }
#technical .agent-output dl > div { border-color: var(--beach-100); }
#technical .agent-output dt { color: var(--sea); }
#technical .agent-output dd { color: var(--stone-600); }
#technical .agent-output .output-route dd { color: var(--sea); }

/* Approval policy and presenter controls. */
.boundary-card { background: var(--white); border-color: var(--beach-200); border-top-color: var(--sea); }
.review-card { background: var(--beach-50); border-top-color: var(--sunshine); }
.boundary-top { color: var(--sea); }
.review-card .boundary-top { color: var(--stone-700); }
.boundary-card li { color: var(--ink-soft); }
.boundary-card li::before { color: var(--stone-500); }
.boundary-bottom { color: var(--stone-600); border-color: var(--beach-100); }
.specialist-strip { background: var(--beach-50); }
.specialist-strip > span:last-child { color: var(--stone-600); }
dialog, #notes-panel { background: var(--white); border-color: var(--beach-200); }
dialog::backdrop { background: color-mix(in srgb, var(--sea-deep) 50%, transparent); }
.overview-description, .route-guide span, .overview-bottom,
.shortcut-guide, #notes-content p { color: var(--stone-600); }
.route-guide p { background: var(--beach-50); }
.overview-row, .shortcut-guide { border-color: var(--beach-100); }
.overview-go { color: var(--ink-soft); }
.overview-row.is-hidden .overview-go { color: var(--stone-600); }
.visibility-button { background: var(--white); border-color: var(--beach-200); color: var(--stone-700); }
.visibility-button:hover { background: var(--beach-100); }
.visibility-button[aria-pressed=true] { color: var(--stone-600); background: var(--beach-50); }