/* GENERATED by brand/generate.py from brand/brand.json. Do not edit by hand. */

@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/brand/fraunces-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/static/fonts/brand/public-sans-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/static/fonts/brand/public-sans-italic-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NearAuth Logo';
  src: url('/static/fonts/DidotTitle.otf');
  font-display: swap;
}

:root {
  /* Type roles: use these, never a font name */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --font-logo: 'NearAuth Logo', Didot, 'Bodoni 72', Georgia, serif;

  /* Raw palette: for one-off brand art. Prefer the semantic colors below. */
  --na-indigo-900: #1A237E;
  --na-indigo-700: #303F9F;
  --na-indigo-500: #3F51B5;
  --na-indigo-300: #7986CB;
  --na-indigo-100: #C5CAE9;
  --na-indigo-50: #E8EAF6;
  --na-pink-500: #E91E63;
  --na-pink-a200: #FF4081;
  --na-navy-950: #0F1124;
  --na-navy-900: #171A33;
  --na-navy-800: #232850;
  --na-dusk-900: #2F2A5A;
  --na-white: #FFFFFF;

  /* Semantic colors (light) */
  --na-bg: #F6F7FB;
  --na-surface: #FFFFFF;
  --na-ink: #161A3A;
  --na-muted: #5B6080;
  --na-line: #DFE2EE;
  --na-primary: #3F51B5;
  --na-primary-hover: #303F9F;
  --na-primary-strong: #1A237E;
  --na-on-primary: #FFFFFF;
  --na-accent: #E91E63;
  --na-on-accent: #FFFFFF;
  --na-band: #2F2A5A;
  --na-on-band: #FFFFFF;
  --na-chip: #E8EAF6;
  --na-ok: #1B7F4B;
  --na-ok-bg: #E5F4EC;
  --na-warn: #9A5B00;
  --na-warn-bg: #FDF0DC;
  --na-danger: #C62828;
  --na-danger-bg: #FCCDC7;
}

/* Dark colors are opt-in: add data-theme="dark" (always dark) or
   data-theme="auto" (follow the OS) to <html>, or class na-dark to any element. */
:root[data-theme="dark"], .na-dark {
  --na-bg: #0F1124;
  --na-surface: #171A33;
  --na-ink: #E8EAF6;
  --na-muted: #9EA3C4;
  --na-line: #2A2E50;
  --na-primary: #8C9EFF;
  --na-primary-hover: #B0BCFF;
  --na-primary-strong: #9FA8FF;
  --na-on-primary: #0F1124;
  --na-accent: #FF6FA0;
  --na-on-accent: #0F1124;
  --na-band: #2F2A5A;
  --na-on-band: #FFFFFF;
  --na-chip: #232850;
  --na-ok: #6FD69C;
  --na-ok-bg: #173527;
  --na-warn: #F2B35B;
  --na-warn-bg: #3A2A12;
  --na-danger: #FF8A80;
  --na-danger-bg: #3B1715;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --na-bg: #0F1124;
    --na-surface: #171A33;
    --na-ink: #E8EAF6;
    --na-muted: #9EA3C4;
    --na-line: #2A2E50;
    --na-primary: #8C9EFF;
    --na-primary-hover: #B0BCFF;
    --na-primary-strong: #9FA8FF;
    --na-on-primary: #0F1124;
    --na-accent: #FF6FA0;
    --na-on-accent: #0F1124;
    --na-band: #2F2A5A;
    --na-on-band: #FFFFFF;
    --na-chip: #232850;
    --na-ok: #6FD69C;
    --na-ok-bg: #173527;
    --na-warn: #F2B35B;
    --na-warn-bg: #3A2A12;
    --na-danger: #FF8A80;
    --na-danger-bg: #3B1715;
    color-scheme: dark;
  }
}