/* Rarevoz: logo and colors (see frontend/public/brand/theme.css for the
 * defaults and what each value colors). The logo red is #F83B39; buttons and
 * links use a deeper red (#c4211f) because #F83B39 on white is 3.7:1, under
 * the 4.5:1 that text needs. Every text/background pair here is at least
 * 5.4:1.
 */

:root {
  /* The logo shown left of the organization's name in the top bar. Any
     image the browser shows (SVG, PNG, WebP), in this folder, named by its
     full path from /brand/ (a relative path won't resolve). Set the
     width to 0 for no logo. */
  --brand-logo: url('/brand/logo.svg');
  --brand-logo-width: 31px;
  --brand-logo-height: 28px;

  --bg: #f8f6f6;            /* page background */
  --surface: #ffffff;       /* top bar, cards, dialogs */
  --text: #211c1c;
  --muted: #635b5b;         /* secondary text */
  --line: #e6dfdf;          /* borders and dividers */
  --accent: #c4211f;        /* buttons, links, the selected menu item */
  --accent-text: #ffffff;   /* text on --accent */
  --notice-bg: #fff4d6;     /* "waking up" and approval notices */
  --notice-text: #5a4300;
  --error: #8f1d14;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* The bird filled white, so it doesn't take on the dark background. */
    --brand-logo: url('/brand/logo-dark.png');

    --bg: #151213;
    --surface: #1f1a1b;
    --text: #ece6e6;
    --muted: #a89e9e;
    --line: #362d2e;
    --accent: #ff6b66;
    --accent-text: #1a0606;
    --notice-bg: #3a2f0b;
    --notice-text: #f5dd9b;
    --error: #ffa08a;
  }
}