/* Design tokens. Every colour, size, radius, shadow and timing the UI uses is
   named here once. A colour is written as light-dark(light, dark): dark follows
   the system unless the reader chose a theme, which sets data-theme on <html>. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-variable-4.1.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* Surfaces, from the frame around the page inwards */
  --chrome: light-dark(#f3f3f6, #08080a);
  --bg: light-dark(#fcfcfd, #0e0e11);
  --surface: light-dark(#ffffff, #141418);
  --surface-2: light-dark(#f4f4f7, #1a1a1f);
  --surface-3: light-dark(#e9e9ee, #222228);
  --line: light-dark(rgb(16 16 32 / .09), rgb(255 255 255 / .08));
  --line-2: light-dark(rgb(16 16 32 / .17), rgb(255 255 255 / .15));

  /* Text */
  --ink: light-dark(#16161b, #ededf1);
  --ink-2: light-dark(#494955, #b5b5c0);
  --ink-3: light-dark(#6a6a77, #8b8b98);

  /* The one accent, and the brand gradient it belongs to */
  --accent: light-dark(#5151cd, #a9a9fa);
  --accent-solid: #5b5bd6;
  --accent-solid-hover: #6767e0;
  --accent-ink: #ffffff;
  --accent-soft: light-dark(#eeeefd, rgb(91 91 214 / .18));
  --accent-line: light-dark(#c9c9f5, rgb(124 124 240 / .45));
  --brand: linear-gradient(135deg, #8b6cf6 0%, #5b5bd6 48%, #38a8f0 100%);
  --focus: light-dark(#5b5bd6, #9a9af8);

  /* Meaning: text on the page / tinted background / the solid mark / the tint's edge.
     The three severity marks were checked as a set, in each theme, for readers
     with colour-blindness; a mark is still never shown without its word or icon. */
  --err: light-dark(#b3261e, #ff9a94);
  --err-soft: light-dark(#fdefed, rgb(229 72 77 / .15));
  --err-mark: light-dark(#e5484d, #cf3a3f);
  --err-line: light-dark(#f6c8c4, rgb(229 72 77 / .4));
  --warn: light-dark(#8c5800, #f3c75a);
  --warn-soft: light-dark(#fff5dd, rgb(245 165 36 / .14));
  --warn-mark: light-dark(#f0a020, #c28400);
  --warn-line: light-dark(#f0d28a, rgb(245 165 36 / .4));
  --info: light-dark(#2c5f9e, #9cc2f0);
  --info-soft: light-dark(#edf4fc, rgb(79 143 220 / .16));
  --info-mark: light-dark(#4f8fdc, #5b93d6);
  --info-line: light-dark(#c5dbf5, rgb(79 143 220 / .4));
  --ok: light-dark(#17744a, #46d894);
  --ok-soft: light-dark(#e8f8ee, rgb(48 164 108 / .15));
  --ok-mark: #30a46c;
  --ok-line: light-dark(#b5e0c5, rgb(48 164 108 / .4));

  /* Charts: one series in the accent's hue; more is up, fewer is down */
  --series: light-dark(#5b5bd6, #8585f2);
  --series-track: light-dark(#e6e6f6, rgb(133 133 242 / .16));
  --series-wash: light-dark(rgb(91 91 214 / .12), rgb(133 133 242 / .16));
  --grid: light-dark(#ebebf0, #24242b);

  /* A diff */
  --add-bg: light-dark(#e3f6e8, rgb(48 164 108 / .15));
  --add-edge: light-dark(#c2ebcd, rgb(48 164 108 / .3));
  --add-ink: light-dark(#17744a, #46d894);
  --del-bg: light-dark(#fdeceb, rgb(229 72 77 / .14));
  --del-edge: light-dark(#f9d2ce, rgb(229 72 77 / .3));
  --del-ink: light-dark(#b3261e, #ff9a94);
  --hunk-bg: light-dark(#f0f0fb, rgb(91 91 214 / .1));

  /* Depth: a hairline does most of the work; shadows are for what floats */
  --shadow-1: 0 1px 2px light-dark(rgb(16 16 32 / .05), rgb(0 0 0 / .4));
  --shadow-2: 0 1px 2px light-dark(rgb(16 16 32 / .06), rgb(0 0 0 / .5)), 0 6px 16px -6px light-dark(rgb(16 16 32 / .1), rgb(0 0 0 / .5));
  --shadow-pop: 0 0 0 1px var(--line), 0 4px 12px -2px light-dark(rgb(16 16 32 / .08), rgb(0 0 0 / .5)), 0 20px 48px -12px light-dark(rgb(16 16 32 / .22), rgb(0 0 0 / .8));

  /* Shape */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --side-w: 252px;
  --top-h: 52px;
  --gutter: 32px;
  --maxw: 1160px;

  /* Type */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, Menlo, "Noto Sans Mono", monospace;
  --fs-2xs: .6875rem;
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs: .875rem;
  --fs-md: .9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.625rem;

  /* Motion: quick out, never in; nothing on the way to a click takes longer than a fifth of a second */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-spring: linear(0, .008 1.1%, .034 2.3%, .134 4.9%, .264 7.3%, .683 14.3%, .797 16.5%, .89 18.6%, .967 20.7%, 1.027 22.8%, 1.073 25%, 1.104 27.3%, 1.123 30.6%, 1.119 34.3%, 1.018 49.5%, .988 58.6%, .985 65.2%, 1 84.5%, 1);
  --t-1: 120ms;
  --t-2: 180ms;
  --t-3: 320ms;
}

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