/* Barlow, as on dasl.ing, for the interface (SIL OFL 1.1) */
@import '@fontsource/barlow/400.css';
@import '@fontsource/barlow/400-italic.css';
@import '@fontsource/barlow/600.css';
@import '@fontsource/barlow/700.css';
@import '@fontsource/barlow/800.css';
/* Recursive's MONO axis for bytes: distinct 0/O and 1/l/I */
@import '@fontsource-variable/recursive/mono.css';

:root {
  color-scheme: light dark;

  /* daylight plate */
  --ground: #f3f4f8;
  --ground-raised: #fbfbfd;
  --ink: #1c1b33;
  --ink-soft: #55546e;
  --ink-faint: #8a89a3;
  --rule: #d9d9e6;
  --focus: #3d6bff;

  /*
   * the selection, everywhere: a saturated blue from the focus family, which no
   * band uses. --chosen fills, with --chosen-ink on top; --chosen-text is the
   * blue as text on the page
   */
  --chosen: #3d6bff;
  --chosen-ink: #ffffff;
  --chosen-text: #2f5be8;

  /* spectral bands: DASL's palette, the same in both color schemes */
  --band-magic: #ff5e5e;
  --band-control: var(--band-magic);
  --band-framing: #fff500;
  --band-meta: #00ff75;
  --band-key: #cd76ea;
  --band-data: #39dbff;
  /* orange ffb443 */
  --band-value: #39dbff;
  --band-unread: #a9a8bd;
  /* text on a full-strength band color */
  --band-ink: #15142a;
  /* strings from the data itself, tinted so they read as content, not interface */
  --string-ink: color-mix(in oklab, var(--band-data) 45%, var(--ink));

  /* absorption: errors darken, they don't add a hue */
  --absorb: #1c1b33;
  --absorb-text: #f3f4f8;
  --strip-line: #0d0c1c;

  --tint: 30%;
  --font-sans: 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Recursive Variable', ui-monospace, monospace;
  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --gap: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* night sky */
    --ground: #15142a;
    --ground-raised: #1c1b36;
    --ink: #e8e7f5;
    --ink-soft: #a9a8c6;
    --ink-faint: #75739a;
    --rule: #2e2d4d;
    --focus: #8aa6ff;

    --chosen: #4a63e8;
    --chosen-text: #8aa6ff;

    --band-unread: #5c5b7a;

    --absorb: #e8e7f5;
    --absorb-text: #15142a;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1;
  font-feature-settings: 'zero' 1;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}