/* Olivos brand -- single source of truth for every page (Sprint 04 Phase 4).
 * Served at /assets/brand/brand.css from the shared bucket; loaded AFTER each
 * page's own <style> so the shared element rules below win.
 *
 * Roles are fixed (SPRINT-04 4.2): Teal for headers/nav/primary buttons,
 * Siena for the one primary action per screen, Charcoal for body text, Cedar
 * for borders and secondary OUTLINES only, Olive and Melon for backgrounds,
 * tags and hover only -- never as text.
 *
 * BANNED (Jeremy, Sprint 05, 2026-09-23): text on Cedar, and Cedar as a fill
 * behind text. Desktop Inventory's Cedar-filled Manager / + Add item put Teal
 * on Cedar (1.41:1). A secondary control is outlined (--line-strong border,
 * --fg text on --bg); a two-state control's "on" state is --primary with
 * --on-primary, like a selected tab. There is deliberately no --on-secondary
 * token: nothing may sit on --secondary.
 *
 * Theme (D9): light unless the phone prefers dark; a manual choice
 * (html[data-theme="light"|"dark"], set by /lib/theme.js from
 * localStorage.olivosTheme) overrides the phone. Teal-on-Charcoal is banned in
 * dark mode (1.5:1), so dark primary is the cream ink and the action is Melon.
 *
 * Contrast (WCAG, computed 2026-09-22 -- full table in INFRASTRUCTURE.md):
 *   charcoal on white 12.3:1 | white on teal 8.0:1 | teal on white 8.0:1
 *   cream on charcoal 10.9:1 | charcoal on cream 10.9:1
 *   white on siena 3.8:1 and charcoal on melon 4.6:1 -- the action colours
 *   cannot reach 7:1 with any text; buttons are >= 18px bold (WCAG "large"),
 *   where 3:1 is AA and 4.5:1 is AAA. Recorded, not silently changed.
 */
:root {
  --teal: #255760; --olive: #828963; --cedar: #816043;
  --siena: #CE662E; --melon: #D98B5C; --charcoal: #353535;
  --cream: #F4F1EC; --olive-light: #A9AE8F;

  --bg: #FFFFFF; --fg: var(--charcoal); --fg-2: #3f3f3f; --muted-fg: #5a5a5a;
  --primary: var(--teal); --on-primary: #FFFFFF; --primary-hover: #1c454c;
  --action: var(--siena); --on-action: #FFFFFF; --action-hover: #b8581f;
  --secondary: var(--cedar);
  --muted: var(--olive); --highlight: var(--melon);
  --surface: #FFFFFF; --surface-2: #F4F1EC; --line: #D9D4CC; --line-strong: var(--cedar);
  --ok: #2b7a3e; --danger: var(--siena); --link: var(--teal);
  --tag-bg: #E7E9DC; --tag-fg: var(--charcoal);
  --focus: var(--siena);
  color-scheme: light;
}
/* Explicit dark choice: always. No choice: only when the phone prefers dark.
 * Two plain blocks on purpose -- nesting a media query inside the selector
 * list would gate the explicit choice on the phone too (found in the 2026-09-22
 * render check). */
:root[data-theme="dark"] {
  --bg: var(--charcoal); --fg: var(--cream); --fg-2: #E6E1DA; --muted-fg: #C9C4BB;
  --primary: var(--cream); --on-primary: var(--charcoal); --primary-hover: #FFFFFF;
  --action: var(--melon); --on-action: var(--charcoal); --action-hover: #E3A077;
  --secondary: var(--melon);
  --muted: var(--olive-light); --highlight: var(--siena);
  --surface: #3D3D3D; --surface-2: #444444; --line: #575757; --line-strong: var(--melon);
  --ok: #8FD19E; --danger: var(--melon); --link: var(--cream);
  --tag-bg: #4A4A4A; --tag-fg: var(--cream);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--charcoal); --fg: var(--cream); --fg-2: #E6E1DA; --muted-fg: #C9C4BB;
    --primary: var(--cream); --on-primary: var(--charcoal); --primary-hover: #FFFFFF;
    --action: var(--melon); --on-action: var(--charcoal); --action-hover: #E3A077;
    --secondary: var(--melon);
    --muted: var(--olive-light); --highlight: var(--siena);
    --surface: #3D3D3D; --surface-2: #444444; --line: #575757; --line-strong: var(--melon);
    --ok: #8FD19E; --danger: var(--melon); --link: var(--cream);
    --tag-bg: #4A4A4A; --tag-fg: var(--cream);
    color-scheme: dark;
  }
}

/* ---- base ------------------------------------------------------------- */
html { background: var(--bg); }
body { background: var(--bg); color: var(--fg); }
a { color: var(--link); }
hr { border-color: var(--line); }
code { background: var(--surface-2); color: var(--fg); }
input, select, textarea { background: var(--surface); color: var(--fg); border-color: var(--line); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::placeholder { color: var(--muted-fg); opacity: 1; }
th, td { border-color: var(--line); }
th { color: var(--muted-fg); }

/* Primary buttons are Teal (cream ink in dark mode); the one main action per
 * screen carries class "action" (or the pages' existing "orange"). Secondary
 * controls are outlined in Cedar. */
button, .btn { background: var(--primary); color: var(--on-primary); }
button:hover, .btn:hover { background: var(--primary-hover); }
button.secondary, .btn.secondary { background: var(--surface); color: var(--primary); border: 2px solid var(--line-strong); }
button.action, button.orange, button.danger, .btn.action { background: var(--action); color: var(--on-action); }
button.action:hover, button.orange:hover, button.danger:hover { background: var(--action-hover); }
button.link { background: none; color: var(--link); border: 0; text-decoration: underline; }
button.olivos-signout { background: transparent; color: inherit; border: 1px solid currentColor; }

/* ---- header: logo + controls ----------------------------------------- */
.brand-logo { display: block; height: 44px; width: auto; }
.brand-logo.full { display: none; }
@media (min-width: 600px) {
  .brand-logo.full { display: block; height: 56px; }
  .brand-logo.mark { display: none; }
}
/* Sprint 05: SVG logos from Jeremy's vector (docs/OlivosMGMT-Logo.svg).
 * Dark mode swaps in logo-full-dark.svg -- the same artwork with the wordmark
 * in cream (10.9:1 on Charcoal; the teal wordmark is 1.5:1 there). Narrow
 * screens show the round mark in both themes. */
.brand-logo.full-dark { display: none; }
:root[data-theme="dark"] .brand-logo.full { display: none; }
@media (min-width: 600px) {
  :root[data-theme="dark"] .brand-logo.full-dark { display: block; height: 56px; }
  :root[data-theme="dark"] .brand-logo.mark { display: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo.full { display: none; }
}
@media (prefers-color-scheme: dark) and (min-width: 600px) {
  :root:not([data-theme="light"]) .brand-logo.full-dark { display: block; height: 56px; }
  :root:not([data-theme="light"]) .brand-logo.mark { display: none; }
}

/* Theme toggle (lib/theme.js) -- 44px, sits next to Sign out. */
button.olivos-theme { min-height: 44px; min-width: 44px; padding: 0 12px; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 8px; font: inherit; font-size: 15px; }
@media (max-width: 700px) { button.olivos-theme .lbl { display: none; } button.olivos-theme { padding: 0 10px; } }
.olivos-header-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- outdoor readability (crew screens, 4.3) --------------------------- */
@media (max-width: 700px) {
  body { font-size: 17px; }
  button, .btn { font-size: 18px; font-weight: 700; }
  button.link, button.olivos-theme, button.olivos-signout { font-size: 15px; font-weight: 600; }
}