/* Brand theme: red, white, black, silver. Loaded after style.css and only overrides tokens + chrome. */

:root {
  --bg: #e8e9eb;            /* light silver */
  --surface: #ffffff;
  --surface-2: #f1f2f3;
  --border: #c3c6ca;        /* silver */
  --text: #111113;
  --text-muted: #5f6368;
  --accent: #c8102e;        /* brand red */
  --accent-strong: #9e0b23;
  --accent-contrast: #ffffff;
  --focus-ring: #c8102e;
  --danger: #8a0a1c;
  --danger-bg: #fbe8eb;
  --silver: #a7abb0;
  --nav-bg: #0b0b0c;        /* black bar */
  --nav-text: #d5d8dc;
  --note-fg: #3d3200;       /* job notes/instructions: dark text on a light yellow highlight */
  --note-bg: #fff3b0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0c;
    --surface: #18191b;
    --surface-2: #222326;
    --border: #3d4045;
    --text: #f5f5f6;
    --text-muted: #b3b7bc;  /* silver */
    --accent: #e0263f;
    --accent-strong: #ff4d63;
    --accent-contrast: #ffffff;
    --focus-ring: #ff4d63;
    --danger: #ff8a95;
    --danger-bg: #3a1419;
    --silver: #8e9297;
    --nav-bg: #000000;
    --nav-text: #c9ccd0;
    --note-fg: #ffd60a;     /* bright yellow text on a subtle dark-yellow tint */
    --note-bg: #3a2f06;
  }
}

:root[data-theme="dark"] {
  --bg: #0b0b0c;
  --surface: #18191b;
  --surface-2: #222326;
  --border: #3d4045;
  --text: #f5f5f6;
  --text-muted: #b3b7bc;
  --accent: #e0263f;
  --accent-strong: #ff4d63;
  --accent-contrast: #ffffff;
  --focus-ring: #ff4d63;
  --danger: #ff8a95;
  --danger-bg: #3a1419;
  --silver: #8e9297;
  --nav-bg: #000000;
  --nav-text: #c9ccd0;
  --note-fg: #ffd60a;
  --note-bg: #3a2f06;
}

/* Job instructions/notes: yellow highlight, everywhere a note is shown (owner app, approve.html,
   Mac admin page, public status page). WCAG AA in both themes -- see the --note-fg/--note-bg
   tokens above (this rule is theme-agnostic; keep this block identical between cloud/public/css/
   theme.css and public/css/theme.css). */
.job-note {
  background: var(--note-bg);
  color: var(--note-fg);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 10px;
  margin: var(--sp-1, 4px) 0;
  font-size: 0.9rem;
  line-height: 1.4;
}
.job-note-label {
  font-weight: 700;
  margin-right: 4px;
}
.job-note-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Black top bar with a red underline and silver links. */
.topnav {
  background: var(--nav-bg);
  border-bottom: 3px solid var(--accent);
}
.topnav .brand {
  color: #ffffff;
  letter-spacing: 0.02em;
}
.nav-links a {
  color: var(--nav-text);
}
.nav-links a:hover {
  background: #26282b;
  color: #ffffff;
}
.nav-links a.active {
  background: var(--accent);
  color: #ffffff;
}

/* Silver edge on cards so white-on-silver reads as brushed metal, not flat grey. */
.card {
  border-color: var(--border);
  border-top: 3px solid var(--silver);
}