/* Newmar / CBW Gateway — conservative navy, light/dark/system.
   Colors chosen for WCAG AA: body text >=4.5:1, large text/UI >=3:1 in both modes.
   No pure black bg, no pure white text in dark mode; navy accent lightened for dark. */

:root {
  color-scheme: light dark;

  /* Light mode (default) */
  --bg:          #f2f5f9;   /* page */
  --surface:     #ffffff;   /* header/body panels */
  --surface-2:   #f7f9fc;   /* cards, thumbs */
  --border:      #d4dbe6;
  --border-2:    #c2cbd9;
  --ink:         #14213d;   /* primary text (navy-black) */
  --ink-2:       #4a5876;   /* secondary text */
  --ink-3:       #6b7894;   /* labels/muted */
  --accent:      #1b3a8c;   /* navy accent */
  --accent-ink:  #17337d;   /* accent text on light */
  --accent-bg:   #e7edf8;   /* accent tint */
  --danger-ink:  #a3312c;
  --danger-bg:   #f6e6e5;
  --focus:       #2a5fd0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #14171d;   /* soft near-black, not #000 */
    --surface:     #191d25;
    --surface-2:   #1f242e;
    --border:      #2c3340;
    --border-2:    #3a4252;
    --ink:         #e4e9f2;   /* off-white, not #fff */
    --ink-2:       #aeb9cd;
    --ink-3:       #8a97ae;
    --accent:      #6f9be0;   /* lightened, desaturated navy for dark */
    --accent-ink:  #a9c4ef;
    --accent-bg:   #1d2a44;
    --danger-ink:  #e79b97;
    --danger-bg:   #2e2020;
    --focus:       #6f9be0;
  }
}

/* Explicit overrides from the toggle (win over system) */
:root[data-theme="light"] {
  --bg:#f2f5f9; --surface:#ffffff; --surface-2:#f7f9fc; --border:#d4dbe6; --border-2:#c2cbd9;
  --ink:#14213d; --ink-2:#4a5876; --ink-3:#6b7894; --accent:#1b3a8c; --accent-ink:#17337d;
  --accent-bg:#e7edf8; --danger-ink:#a3312c; --danger-bg:#f6e6e5; --focus:#2a5fd0;
}
:root[data-theme="dark"] {
  --bg:#14171d; --surface:#191d25; --surface-2:#1f242e; --border:#2c3340; --border-2:#3a4252;
  --ink:#e4e9f2; --ink-2:#aeb9cd; --ink-3:#8a97ae; --accent:#6f9be0; --accent-ink:#a9c4ef;
  --accent-bg:#1d2a44; --danger-ink:#e79b97; --danger-bg:#2e2020; --focus:#6f9be0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: inherit; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 20px 18px 64px; }

/* Header */
.hdr {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px 12px 0 0; padding: 16px 20px;
}
.hdr img.logo { width: 40px; height: 40px; border-radius: 6px; flex: 0 0 40px; }
.hdr .brand { flex: 1; min-width: 0; }
.hdr .brand .t { font-size: 18px; font-weight: 700; color: var(--ink); }
.hdr .brand .s { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); }

/* Mode toggle */
.modes { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.modes button {
  width: 30px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--ink-3); border-radius: 6px; cursor: pointer;
}
.modes button svg { width: 17px; height: 17px; }
.modes button[aria-pressed="true"] { background: var(--surface); color: var(--accent-ink); box-shadow: 0 0 0 1px var(--border); }
.modes button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Nav */
nav.tabs {
  display: flex; flex-wrap: wrap; gap: 3px;
  background: var(--surface); border: 1px solid var(--border); border-top: none;
  padding: 8px 12px;
}
nav.tabs button {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 14px; border: none; background: transparent; color: var(--ink-2);
  border-radius: 7px; cursor: pointer;
}
nav.tabs button:hover { background: var(--accent-bg); color: var(--accent-ink); }
nav.tabs button[aria-current="true"] { background: var(--accent-bg); color: var(--accent-ink); }
nav.tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Body panel */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 12px 12px; padding: 22px 20px;
  min-height: 260px;
}

.section { margin-bottom: 26px; }
.section:last-child { margin-bottom: 0; }
.section h2 {
  margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--ink-3);
}

/* Link cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.card {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 13px 15px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; color: var(--ink); font-size: 14px; font-weight: 600;
}
.card:hover { border-color: var(--accent); }
.card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.card .ico { width: 20px; height: 20px; flex: 0 0 20px; color: var(--accent-ink); }
.card .pdf {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  color: var(--danger-ink); background: var(--danger-bg); padding: 2px 7px; border-radius: 4px;
}

/* Announcements */
.ann { margin-bottom: 22px; }
.ann h2.title { margin: 0 0 2px; font-size: 20px; font-weight: 700; color: var(--ink); }
.ann .meta { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
.ann .body p { margin: 0 0 10px; color: var(--ink-2); }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px;
}
.grid .thumb {
  position: relative; aspect-ratio: 1/1; border-radius: 6px; overflow: hidden;
  cursor: pointer; border: 1px solid var(--border); background: var(--surface-2);
}
.grid .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid .thumb:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.grid .thumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.divider { height: 1px; background: var(--border); margin: 22px 0; border: none; }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; background: rgba(10, 14, 22, .93);
}
.lb.open { display: flex; }
.lb img { max-width: 88vw; max-height: 82vh; border-radius: 8px; }
.lb button {
  position: absolute; border: none; color: #fff; background: rgba(255,255,255,.14);
  cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 8px;
}
.lb button:hover { background: rgba(255,255,255,.24); }
.lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb .close { top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 8px; }
.lb .nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; }
.lb .prev { left: 14px; } .lb .next { right: 14px; }
.lb .count { bottom: 18px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.4); color: #fff;
  font-size: 13px; padding: 5px 14px; border-radius: 20px; position: absolute; }
.lb svg { width: 22px; height: 22px; }

@media (max-width: 520px) {
  .hdr .brand .t { font-size: 16px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}