/* Weblab's shared look: one typeface, one set of neutral colours and one set of shapes for the homepage, the 404
   page and every section. A section loads ../theme.js (the light/dark switch) and this file first, then its own stylesheet, and builds on
   the --wl-* tokens below. Sections keep their own accent colour; everything else comes from here.
   Inter (variable, 400-800) is served from fonts/ so the site does not depend on Google Fonts. Licence: SIL OFL 1.1. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/inter-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/inter-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 {
  --wl-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wl-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;   /* only for real code */
  --wl-radius: 22px;          /* cards */
  --wl-radius-md: 14px;       /* panels, marks */
  --wl-radius-sm: 10px;       /* buttons, inputs */
  --wl-pill: 999px;
  --wl-wash:
    radial-gradient(40% 60% at 15% 10%, #ffd9c2 0, transparent 70%),
    radial-gradient(35% 55% at 85% 0%, #cfe0ff 0, transparent 70%),
    radial-gradient(30% 50% at 55% 30%, #e3d6ff 0, transparent 70%);
}

/* Dark is the default. theme.js sets <html data-theme> from the visitor's choice; with no script the page stays dark,
   which is why dark rules elsewhere use :root:not([data-theme="light"]). */
:root {
  --wl-bg: #101114;
  --wl-surface: #1a1c21;
  --wl-surface-2: #23262c;
  --wl-edge: #2c3038;
  --wl-ink: #f2f3f5;
  --wl-ink-2: #b4b9c1;
  --wl-ink-3: #8a9099;
  --wl-focus: #7c9cff;
  --wl-on-accent: #101114;
  --wl-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .5);
  --wl-shadow-lift: 0 18px 40px -18px rgb(0 0 0 / .7);
  --wl-wash-opacity: .16;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --wl-bg: #ffffff;           /* page */
  --wl-surface: #f5f6f8;      /* cards, panels */
  --wl-surface-2: #eceef2;    /* inputs, wells, hover */
  --wl-edge: #e2e5ea;         /* hairlines, when a surface needs one */
  --wl-ink: #14161a;
  --wl-ink-2: #4d535c;
  --wl-ink-3: #737a85;
  --wl-focus: #3b6cf6;
  --wl-on-accent: #ffffff;
  --wl-shadow: 0 1px 2px rgb(20 22 26 / .04), 0 8px 24px -12px rgb(20 22 26 / .12);
  --wl-shadow-lift: 0 18px 40px -18px rgb(20 22 26 / .28);
  --wl-wash-opacity: .8;
  color-scheme: light;
}

/* The light/dark button theme.js adds to a section's header. */
.wl-theme {
  flex: none; width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--wl-pill);
  background: var(--wl-surface); color: var(--wl-ink-2); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.wl-theme:hover { background: var(--wl-surface-2); color: var(--wl-ink); }
.wl-theme:focus-visible { outline: 2px solid var(--wl-focus); outline-offset: 2px; }
.wl-theme svg { width: 18px; height: 18px; }