/* Fonts, color tokens (light and dark) and base element styles shared by every page. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/atkinson-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/atkinson-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(/fonts/bricolage-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(/fonts/bricolage-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --bg: #E9EEF5;
  --surface: #FFFFFF;
  --line: #CBD3E1;
  --line-soft: #E3E8F0;
  --ink: #1A2238;
  --ink2: #2A3350;
  --muted: #4A5470;
  --accent: #2F45D8;
  --accent-strong: #1F2FA8;
  --on-accent: #FFFFFF;
  --accent-soft: #DDE3FB;
  --chip: #E9EEF5;
  --code: #F2F5FA;
  --get-bg: #1A2238;
  --get-ink: #FFFFFF;
  --get-ink2: rgba(255,255,255,.82);
  --get-btn: #FFFFFF;
  --get-btn-ink: #1A2238;
  --warn-bg: #FDF1DC;
  --warn-ink: #7A4A00;
  --ok-bg: #E8F4EE;
  --ok-ink: #1B6B45;
  --danger-ink: #A8321E;
  --danger-line: #E8B4A8;
  --danger-bg: #FBEDEA;
  --display: "Bricolage Grotesque",system-ui,sans-serif;
  --text: "Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease-out: cubic-bezier(.23,1,.32,1);
  /* Dark band (the trust section): dark in both color schemes. */
  --band-bg: #1A2238;
  --band-ink: #FFFFFF;
  --band-ink2: rgba(255, 255, 255, .8);
  --band-faint: rgba(255, 255, 255, .7);
  --band-surface: #232C48;
  --band-accent: #8E9CFF;
  --band-on-accent: #1A2238;
  --band-line: rgba(255, 255, 255, .38);
  --band-chip: rgba(255, 255, 255, .12);
  --band-danger-line: #FF9B8A;
  --band-danger-ink: #FFB3A6;
  /* White elements laid on the accent color. */
  --paper: #FFFFFF;
  --paper-ink: #1A2238;
  /* The accent on white elements, in both themes (the dark theme's accent is too pale on white). */
  --paper-accent: #2F45D8;
  --shadow-soft: 0 1px 2px rgba(26, 34, 56, .12);
}

/*
 * Dark tokens: from the device's setting, unless the visitor chose light; or chosen on the page (data-theme on
 * <html>, set by the server from the theme cookie and by public/scripts/theme.js). Both blocks must stay identical.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1322;
    --surface: #161C2E;
    --line: #2B3450;
    --line-soft: #222A40;
    --ink: #E8ECF5;
    --ink2: #C9D0E0;
    --muted: #A3ADC4;
    --accent: #8E9CFF;
    --accent-strong: #B7C0FF;
    --on-accent: #0B1020;
    --accent-soft: #232C55;
    --chip: #222A40;
    --code: #1D2438;
    --get-bg: #E8ECF5;
    --get-ink: #1A2238;
    --get-ink2: #3B4462;
    --get-btn: #1A2238;
    --get-btn-ink: #FFFFFF;
    --warn-bg: #3A2A0E;
    --warn-ink: #F3C77A;
    --ok-bg: #12301F;
    --ok-ink: #8FD9B0;
    --danger-ink: #FFB3A6;
    --danger-line: #6B2F25;
    --danger-bg: #2E1713;
  }
}

:root[data-theme="dark"] {
  --bg: #0E1322;
  --surface: #161C2E;
  --line: #2B3450;
  --line-soft: #222A40;
  --ink: #E8ECF5;
  --ink2: #C9D0E0;
  --muted: #A3ADC4;
  --accent: #8E9CFF;
  --accent-strong: #B7C0FF;
  --on-accent: #0B1020;
  --accent-soft: #232C55;
  --chip: #222A40;
  --code: #1D2438;
  --get-bg: #E8ECF5;
  --get-ink: #1A2238;
  --get-ink2: #3B4462;
  --get-btn: #1A2238;
  --get-btn-ink: #FFFFFF;
  --warn-bg: #3A2A0E;
  --warn-ink: #F3C77A;
  --ok-bg: #12301F;
  --ok-ink: #8FD9B0;
  --danger-ink: #FFB3A6;
  --danger-line: #6B2F25;
  --danger-bg: #2E1713;
}

:root {
  color-scheme: light dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* The light/dark button: an icon for the mode it switches to, hidden until its script is there. */
.theme-toggle {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

@media (hover: hover) {
  .theme-toggle:hover {
    color: var(--ink);
  }
}

/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

.theme-toggle .to-dark {
  display: inline-grid;
}

.theme-toggle .to-light {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .to-dark {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle .to-light {
    display: inline-grid;
  }
}

:root[data-theme="dark"] .theme-toggle .to-dark {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .to-light {
  display: inline-grid;
}


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-strong);
}

.press {
  transition: transform 140ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.press:active {
  transform: scale(.97);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .press {
    transition: none;
  }
  .press:active {
    transform: none;
  }
}

/* The Chappe name and mast in each page header. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  text-decoration: none;
}

.brand span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}