/* Henna Kari's app reference, 13 October 2026. Dark is the only site theme.
   White button labels use the reference's accessible #2C7A7B correction. */
html:root {
  color-scheme: dark;
  --paper: #1D1D2A;
  --card: #27263B;
  --field: #363749;
  --field-border: #A0AEC0;
  --ink: #FFFFFF;
  --muted: #CBD5E0;
  --caption: #A0AEC0;
  --disabled: #718096;
  --line: rgba(255,255,255,.12);
  --pale: var(--card);
  --teal: #319795;
  --accent: #55B6B4;
  --green: var(--accent);
  --action: #2C7A7B;
  --action-hover: #005C5B;
  --tip: #007977;
  --selected: rgba(0,255,255,.05);
  --selection-line: rgba(0,255,255,.3);
  --focus: #00FFFF;
  --required: #00FF00;
  --success: #38A169;
  --warning: #F6E05E;
  --error: #DE425B;
  --error-text: #FC8181;
  --badge-blue: #3182CE;
  --badge-purple: #805AD5;
  --badge-orange: #F6AD55;
  --chart-teal: #319795;
  --chart-cyan: #00FFFF;
  --chart-blue: #0000FF;
  --chart-blue-light: #4D78FF;
  --chart-purple: #9902CC;
  --chart-purple-light: #EBB3FE;
  --chart-lime: #00FF00;
  --chart-green-light: #B3FFB3;
  --font: 'Work Sans','Helvetica Neue',Arial,sans-serif;
  scrollbar-color: var(--field) rgba(255,255,255,.1);
}
html ::selection { background: var(--action-hover); color: var(--ink); }
html[data-theme] .muted-green { color: var(--caption); }
html[data-theme] .site-header, html[data-theme] .site-header nav,
html[data-theme] .matching, html[data-theme] .people { background: var(--paper); }
html[data-theme] .site-header { border-color: var(--line); }
html[data-theme] .site-footer { background: var(--card); }
html[data-theme] .button { background: var(--action); color: var(--ink); border-radius: 5px; font-weight: 600; }
html[data-theme] .button:hover { background: var(--action-hover); color: var(--ink); }
html[data-theme] .header-cta { border: 2px solid var(--teal); border-radius: 5px; font-weight: 600; }
html[data-theme] .header-cta:hover { background: var(--action-hover); }
html[data-theme] .topic-filters button[aria-pressed=true],
html[data-theme] .value-scenarios button[aria-pressed=true] { background: var(--action); color: var(--ink); border-color: var(--teal); }
html[data-theme] :is(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
html[data-theme] input[type=range] { accent-color: var(--teal); }
html[data-theme] .required-marker { color: var(--required); }

/* Native menus have explicit foregrounds and backgrounds, including the popup. */
html[data-theme] select, html[data-theme] select option, html[data-theme] select optgroup {
  color: var(--ink); background-color: var(--field);
}
html[data-theme] select { border: 1px solid var(--field-border); border-radius: 5px; padding: 10px 12px; min-height: 44px; }
html[data-theme] :is(.demo-fields,.value-report-card,.value-scope-fields) :is(input,textarea),
html[data-theme] .value-number, html[data-theme] .value-number input,
html[data-theme] .demo-preview { color: var(--ink); background: var(--field); border-color: var(--field-border); }
html[data-theme] input::placeholder, html[data-theme] textarea::placeholder { color: var(--caption); opacity: 1; }
html[data-theme] .contract-controls label, html[data-theme] .section-label,
html[data-theme] .capability-number, html[data-theme] .contract-fixed,
html[data-theme] .matching th, html[data-theme] .matching td small,
html[data-theme] .matching-result span, html[data-theme] .example-note,
html[data-theme] .scope-note, html[data-theme] .coverage li span { color: var(--caption); }
html[data-theme] .contract-fixed strong { color: var(--ink); }
html[data-theme] .matching tr.is-match td { background: var(--selected); }
html[data-theme] .matching tr.is-match td:first-child { box-shadow: inset 3px 0 var(--focus); }
html[data-theme] .match-status { color: var(--caption); }
html[data-theme] .is-match .match-status { color: var(--success); }
html[data-theme] .matching-book, html[data-theme] .matching-result { border-color: var(--line); }
html[data-theme] #shortfall, html[data-theme] .gap-line>strong { color: var(--error-text); }
html[data-theme] .result-bar>span { background: var(--success); }
html[data-theme] .result-bar>i { border-color: var(--error); background: repeating-linear-gradient(-45deg,transparent,transparent 3px,var(--error) 3px,var(--error) 4px); }
html[data-theme] .value-bar-current { background: var(--caption); }
html[data-theme] .value-bar-scenario { background: linear-gradient(90deg,var(--chart-teal),var(--chart-cyan)); }
html[data-theme] #value-net[data-result=negative], html[data-theme] #value-input-error { color: var(--error-text); }
html[data-theme] #value-net[data-result=positive] { color: var(--success); }
html[data-theme] .reconciliation-rows em { color: var(--warning); }
html[data-theme] .guide-answer, html[data-theme] .guide-callout { background: var(--card); border-color: var(--tip); }

/* Keywords are static metadata. Underlines are reserved for actual links. */
html[data-theme] .attribute-line, html[data-theme] .product-panel-tags { gap: 8px 16px; color: var(--caption); }
html[data-theme] .attribute-line span, html[data-theme] .product-panel-tags span { border: 0; padding: 0; cursor: default; }
html[data-theme] .attribute-line span + span::before,
html[data-theme] .product-panel-tags span + span::before { content: '·'; margin-right: 16px; }
html[data-theme] .publisher-mark { background: var(--card); border-color: var(--line); }
html[data-theme] .publisher-mark img { width: 26px; height: 26px; display: block; border-radius: 0; object-fit: contain; }
html[data-theme] .workflow-mark { display: inline-flex; }
html[data-theme] .workflow-mark img { display: block; width: 26px; height: 26px; object-fit: contain; }
.guide-scope-note { color: var(--caption); font-size: 12px; line-height: 1.6; margin-bottom: 18px; }

/* Recorded app colours stay intact. The new Dashboard keeps its portrait frame. */
html[data-theme] .product-tour { background: var(--card); }
html[data-theme] .product-hero { background: var(--paper); }
html[data-theme] .product-window, html[data-theme] .product-video-shell,
html[data-theme] .product-video-shell video { background: var(--paper); border-color: var(--line); }
html[data-theme] .product-window-top { background: var(--card); color: var(--muted); border-color: var(--line); }
html[data-theme] .product-window figcaption { color: var(--muted); border-color: var(--line); }
html[data-theme] .product-window figcaption > span + span { color: var(--caption); }
html[data-theme] .product-play, html[data-theme] .product-screen-prompt { background: var(--action); color: var(--ink); border-color: var(--teal); border-radius: 5px; }
html[data-theme] .product-play small { color: var(--ink); }
html[data-theme] .product-play:hover, html[data-theme] .product-hero-screen:hover .product-screen-prompt { background: var(--action-hover); }
html[data-theme] .product-tour-tabs [aria-selected=true] { background: var(--selected); border-bottom-color: var(--teal); }
html[data-theme] .product-video-portrait { aspect-ratio: 4 / 5; width: min(100%,520px); margin-inline: auto; }
html[data-theme] .product-video-portrait .product-play { left: 16px; right: 16px; bottom: 16px; justify-content: center; }
.product-tour-panel { scroll-margin-top: 28px; }

/* Product illustrations follow the app's layers, selection glow and statuses. */
html[data-theme] .product-record, html[data-theme] .record-plan,
html[data-theme] .record-delivery, html[data-theme] .record-inventory,
html[data-theme] .workflow-window, html[data-theme] .planner-workbench { background: var(--card); color: var(--ink); border-color: var(--line); }
html[data-theme] .record-inventory { border-color: var(--selection-line); box-shadow: 0 0 20px var(--selected),0 28px 50px -18px #0009; }
html[data-theme] :is(.pr-top,.pr-volume>span,.pr-fields dt,.pr-foot,.pr-delivery-heading>span,.pr-progress,.pr-bottom,.record-composition-note) { color: var(--caption); }
html[data-theme] :is(.pr-type,.pr-allocation>span,.pr-allocation>div>span,.pr-bottom) { border-color: var(--line); }
html[data-theme] :is(.pr-plan-heading>span,.pr-volume svg,.pr-allocation>i) { color: var(--accent); }
html[data-theme] :is(.pr-dot,.pr-bottom i,.pr-progress i,.planner-track>i,.delivery-scroll-progress>i) { background: var(--teal); }
html[data-theme] :is(.pr-progress>div,.planner-track) { background: var(--field); }
html[data-theme] .pr-pending, html[data-theme] .workflow-attention, html[data-theme] .workflow-attention>span { color: var(--warning); }
html[data-theme] .has-exception .planner-status { color: var(--warning); }
html[data-theme] .has-exception .planner-track>i { background: var(--warning); }
html[data-theme] .has-mismatch .planner-status { color: var(--error-text); }
html[data-theme] .has-mismatch .planner-track>i { background: var(--error); }
html[data-theme] .record-composition-note { background: var(--paper); }
html[data-theme] .workflow-window-top { background: var(--field); border-color: var(--line); }
html[data-theme] .workflow-badge { color: var(--accent); border-color: var(--teal); }
html[data-theme] .allocation-source { border-color: var(--selection-line); background: var(--selected); }
html[data-theme] .allocation-branch path { stroke: var(--teal); }
html[data-theme] .contact { background: var(--card); color: var(--ink); }
html[data-theme] .contact h2>span { color: var(--accent); }
html[data-theme] .contact .marker { background: var(--teal); }
html[data-theme] .contact .eyebrow, html[data-theme] .contact-grid>div>p,
html[data-theme] .contact-grid>div>.contact-context, html[data-theme] .contact-email { color: var(--muted); }
html[data-theme] .contact .button-light { background: var(--action); color: var(--ink); }
html[data-theme] .contact .button-light:hover { background: var(--action-hover); }
html[data-theme] .skip-link { background: var(--card); color: var(--ink); }
@media(max-width:900px) { html[data-theme] .menu-toggle { margin-left: auto; } }