/* Panoramic Doors Vision tokens.
   Official lockup (brand/logo.png): cyan stacked-panel icon, PANORAMIC bold /
   DOORS light on black. Sampled from panoramicdoors.com wordmark:
     glass   #7EC8E3
     horizon #3A8FBF
     ground  #000000
*/

:root {
  --brand-name: "Panoramic Doors";
  --brand-accent: #7EC8E3;
  --brand-accent-hover: #9AD6EB;
  --brand-accent-deep: #3A8FBF;
  --brand-accent-faint: rgba(126, 200, 227, .16);
  --brand-accent-line: rgba(126, 200, 227, .38);
  --brand-ink: #000000;
  --brand-surface: #141414;
  --brand-surface-2: #1c1c1c;
  --brand-paper: #F4F1EA;
  --brand-silver: #a3a3a3;
  --brand-bronze: #8C7355;
  --on-accent: #0a0a0a;

  --its-orange: var(--brand-accent);
  --its-orange-deep: var(--brand-accent-deep);
  --its-navy: #111111;
  --its-ink: var(--brand-ink);
  --its-cyan: var(--brand-accent);
  --its-blue: var(--brand-accent-deep);
  --plus: #3D8B6E;
  --paper: var(--brand-paper);
  --accent: var(--brand-accent);
  --accent-hover: var(--brand-accent-hover);
  --accent-faint: var(--brand-accent-faint);
  --accent-line: var(--brand-accent-line);
}

html[data-theme="dark"],
:root {
  --bg: #000000;
  --bg-rgb: 0, 0, 0;
  --surface: #141414;
  --surface2: #1c1c1c;
  --surface3: #262626;
  --card-base: #141414;
  /* Renamed from --glass to end the collision with frontend/tokens.css, where
     --glass is the cyan accent. This is a near-black scrim; nothing reads it as
     an accent. */
  --scrim: rgba(0, 0, 0, .92);
  --panel: rgba(20, 20, 20, .94);
  --text: #f4f4f5;
  --text-rgb: 244, 244, 245;
  --text-dim: #a3a3a3;
  --mut: 163, 163, 163;
  --on-accent: #0a0a0a;
  --border: rgba(244, 241, 234, .14);
  --line: #262626;
  --success: #3D8B6E;
  --warning: #8C7355;
  --cat-1: #7EC8E3;
  --cat-2: #3A8FBF;
  --cat-3: #8C7355;
}

.brand-logo {
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
  background: transparent;
  padding: 0;
}
.honesty {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft, #a3a3a3);
  border: 1px solid var(--edge, #333);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.honesty.gap { border-color: var(--fail-soft, rgba(196, 92, 74, .45)); color: var(--fail, #C45C4A); }
.stage-toggle button.on,
.toggle button.on { background: var(--glass, #7EC8E3) !important; color: var(--on-glass, #0a0a0a) !important; }
/* Legacy aliases from the ITS fork. .btn.primary is defined properly in
   frontend/shell.css, which loads after this file — it is deliberately NOT
   forced here any more, so its hover state can actually fire. */
.btn.orange, .btn-p {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--on-accent);
}
.its-rule { background: var(--glass, #7EC8E3); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line, #262626); }
th { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft, #a3a3a3); }