/* Light / dark palette for the hand-written pages.
 *
 * The homepage is a build with its own token set; these pages are static HTML
 * whose colours were written as literals, so the literals were converted to
 * three variables and the two themes are defined here. theme.js puts
 * data-theme on <html> before first paint.
 *
 *   --ink-rgb    the text colour, as an RGB triplet so every rgba(..., a)
 *                alpha in those pages keeps working unchanged
 *   --page-bg    the page behind everything
 *   --panel-rgb  the panels and cards that sit on it, same triplet trick
 *   --ink        plain opaque text (what used to be #fff)
 *
 * Dark is unchanged from what shipped: #050605 behind #e8fff1 text.
 */
:root {
  --ink-rgb: 232, 255, 241;
  --panel-rgb: 5, 8, 6;
  --page-bg: #050605;
  --ink: #ffffff;
  --mint-rgb: 124, 255, 168;
  --gold-text: #ffd27c;
  --gold-fill: #ffd27c;
  --gold-ink: #04150a;
  --warn-text: #ffc440;
  --danger-text: #ff8080;
  /* Green as TEXT. The fill green has to stay bright so dark ink reads on a
   * button; bright green as text on a white page is 1.8:1. Two tokens. */
  --accent-text: #7cffa8;
  /* The three dots in "What hosts say about them". These are fills, not
   * text, so they are their own tokens: a dot only has to be distinguishable
   * (3:1), and the text colours are tuned for 4.5:1, which on a light page
   * drags the yellow so far down it stops reading as yellow at all. */
  --dot-green: #7cffa8;
  --dot-yellow: #ffc440;
  --dot-red: #ff8080;
  color-scheme: dark;
}

:root[data-theme='light'] {
  --ink-rgb: 10, 26, 17;
  --panel-rgb: 255, 255, 255;
  --page-bg: #f4f7f5;
  --ink: #0a1a11;
  --mint-rgb: 11, 122, 58;
  --gold-text: #7a5500;
  --gold-fill: #ffc93f;
  --gold-ink: #3a2a00;
  --warn-text: #8a6200;
  --danger-text: #c0271f;
  --accent-text: #0a6e34;
  /* 5.05, 3.37 and 5.48 on #f4f7f5. The yellow is the constrained one --
   * actual yellow is 1.4:1 on a near-white page and invisible at 8px, so it
   * is the brightest gold that still clears 3:1. */
  --dot-green: #0a7a3a;
  --dot-yellow: #b07d00;
  --dot-red: #c0271f;
  color-scheme: light;
}

/* The green reads at 1.6:1 on white, so it darkens with the theme. --accent is
 * each page's own token; this overrides it rather than touching every use. */
:root[data-theme='light'] {
  /* Fills, borders and glows only -- text uses --accent-text. A gradient that
     pairs --accent-soft with --accent needs both ends bright, or the dark ink
     on top of it fails (rank.html's own button, at 3.46:1). */
  --accent: #2be06a;
  --accent-soft: #7cffa8;
  --accent-deep: #0a6e34;
  --gold: #7a5500;
}

/* Panels on these pages lean on a dark drop shadow and a green glow to lift
 * off the background. On white both read as grime, so they soften. */
:root[data-theme='light'] body {
  background: var(--page-bg);
  color: var(--ink);
}

/* The lockup is a white wordmark with no dark variant. In light mode it is
   filtered to the same near-black green the headings use, which keeps one
   asset instead of two (the shield's green goes with it -- the trade we took
   on the homepage nav too). */
:root[data-theme='light'] img[src*='vettd-lockup-cutout'],
:root[data-theme='light'] img[src*='vettd-logo'] {
  filter: brightness(0) saturate(100%) invert(9%) sepia(21%) saturate(900%) hue-rotate(96deg);
}

/* The transition overlay's shield is the same white PNG as the wordmark. */
:root[data-theme='light'] img[src*='vettd-shield-icon'] {
  filter: brightness(0) saturate(100%) invert(9%) sepia(21%) saturate(900%) hue-rotate(96deg);
}

/* The scan overlay is a night video in both themes -- its own background is a
 * fixed dark green and the copy sits on top of the footage. So everything
 * inside it keeps the dark palette: in light mode the tokens had turned its
 * text dark-on-dark, which is unreadable. #scan-mobile lives inside it, so the
 * phone loader is covered by the same block.
 */
:root[data-theme='light'] #scan-video-overlay {
  --ink-rgb: 232, 255, 241;
  --panel-rgb: 5, 8, 6;
  --mint-rgb: 124, 255, 168;
  --ink: #ffffff;
  --accent: #2be06a;
  --accent-soft: #7cffa8;
  --accent-text: #7cffa8;
  --accent-deep: #0f9a4d;
  --gold-text: #ffd27c;
  --gold-fill: #ffd27c;
  --gold-ink: #04150a;
  --warn-text: #ffc440;
  --danger-text: #ff8080;
  color: var(--ink);
}

/* ...except on a phone, where there is no video at all -- the loader draws its
 * own ring and cards on the overlay's background (see __vettdIsPhoneViewport in
 * check-guest.html: startScanVideo is desktop-only). So in light mode the phone
 * loader is a light screen with dark copy, rather than the dark palette above
 * sitting on a dark page for no reason. !important beats the element's own
 * inline background.
 */
@media (max-width: 720px) {
  :root[data-theme='light'] #scan-video-overlay {
    background: var(--page-bg) !important;
    --ink-rgb: 10, 26, 17;
    --panel-rgb: 255, 255, 255;
    --mint-rgb: 11, 122, 58;
    --ink: #0a1a11;
    --accent: #2be06a;
    --accent-soft: #0b7a3a;
    --accent-text: #0a6e34;
    --accent-deep: #0a6e34;
    --gold-text: #9a6b00;
    --warn-text: #8a6200;
    --danger-text: #c0271f;
    color: var(--ink);
  }
}

/* The phone loader is light, so the two controls pinned dark for the desktop
 * video have to come back with it -- otherwise the cancel dialog is a dark
 * panel with dark copy on a light screen. */
@media (max-width: 720px) {
  :root[data-theme='light'] #scan-video-cancel,
  :root[data-theme='light'] #scan-video-cancel-confirm {
    background: rgba(var(--panel-rgb), 0.94) !important;
    border-color: rgba(var(--ink-rgb), 0.14) !important;
  }
  :root[data-theme='light'] #scan-video-cancel-confirm-yes {
    background: var(--danger-text) !important;
    color: #ffffff !important;
    border-color: var(--danger-text) !important;
  }
}