/* Sandoval Project Tracker color palette.
   Naming convention mirrors docs/branding/halff.css, adapted for this client project
   (Halff internal branding does not apply to external client applications). */

:root {
  --sandoval-color-black: #000000;
  --sandoval-color-navy: #14213d;
  --sandoval-color-orange: #fca311;
  --sandoval-color-gray: #e5e5e5;
  --sandoval-color-white: #ffffff;

  --sandoval-bg: var(--sandoval-color-white);
  --sandoval-surface: var(--sandoval-color-gray);
  --sandoval-text: var(--sandoval-color-black);
  --sandoval-heading: var(--sandoval-color-navy);
  --sandoval-border: var(--sandoval-color-gray);
  --sandoval-accent-ink: #5c3800;
  --sandoval-ring: rgba(20, 33, 61, 0.10);

  /* Tells the browser which palette native form controls (date/time picker icons,
     number spinners, checkboxes, scrollbars) should render in. Without this, those
     browser-drawn icons always use light-scheme colors, even on our dark background. */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sandoval-bg: var(--sandoval-color-black);
    --sandoval-surface: #1b2436;
    --sandoval-text: var(--sandoval-color-gray);
    --sandoval-heading: var(--sandoval-color-white);
    --sandoval-border: #2a3550;
    --sandoval-accent-ink: #2a1a00;
    --sandoval-ring: rgba(252, 163, 17, 0.12);
    color-scheme: dark;
  }
}