/* LOCUS Lab — tokens, fonts and resets shared by the site and the dashboard.
   A bright white page, deep indigo ink, one violet accent for interaction, and a
   playful palette (sun, leaf, sky, coral, pink, lilac) reserved for illustration and tints. */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque.woff") format("woff"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk-Italic.woff") format("woff"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono.woff") format("woff"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f5fb;
  --ink: #1b1838;
  --ink-2: #45425f;
  --muted: #6c6987;
  --line: #ebe9f3;
  --line-2: #d9d6e6;
  --accent: #5b3df5;
  --accent-ink: #4b2ee0;
  --accent-wash: #efebff;
  --danger: #d1372b;
  --ok: #158a55;

  /* illustration palette */
  --paper: #ffffff;
  --violet: #5b3df5;
  --sun: #ffc53d;
  --sun-ink: #8a5d00;
  --sun-wash: #fff3cc;
  --leaf: #22a66e;
  --sky: #7cc8ff;
  --coral: #ff7a59;
  --pink: #ff8fc6;
  --lilac: #c6b6ff;
  --tint-lilac: #f2eeff;
  --tint-sun: #fff6da;
  --tint-leaf: #e4f6ed;
  --tint-sky: #e6f4ff;
  --tint-pink: #ffeef6;

  /* the street scene */
  --scene-sky: #ffffff;
  --scene-ground: #efeaff;
  --scene-kerb: #d8ceff;
  --scene-back: #f1eefc;
  --scene-window: #ffffff;
  --scene-cloud: #f3f1fb;
  --scene-night: 0;

  /* --f-display and --f-text are defined below, so they can pick up --f-cjk per language */
  --f-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC";
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(18px, 4vw, 48px);
  --page: 1320px;
  --measure: 44rem;
  --content: 60rem;   /* shared width of blog articles and wiki pages */
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12101f;
  --surface: #1a1830;
  --surface-2: #201d3a;
  --ink: #efedf9;
  --ink-2: #c9c6dd;
  --muted: #9a96b6;
  --line: #2a2745;
  --line-2: #393557;
  --accent: #9d8bff;
  --accent-ink: #b5a8ff;
  --accent-wash: #272150;
  --danger: #ff8a7e;
  --ok: #6fd6a2;
  --paper: #f4f2ff;
  --sun-ink: #ffd36b;
  --sun-wash: #3a2f12;
  --tint-lilac: #221d42;
  --tint-sun: #2c2617;
  --tint-leaf: #15291f;
  --tint-sky: #142536;
  --tint-pink: #2e1a2a;
  --scene-sky: #12101f;
  --scene-ground: #1d1838;
  --scene-kerb: #2f2858;
  --scene-back: #1b1833;
  --scene-window: #3b356a;
  --scene-cloud: #1c1934;
  --scene-night: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12101f;
    --surface: #1a1830;
    --surface-2: #201d3a;
    --ink: #efedf9;
    --ink-2: #c9c6dd;
    --muted: #9a96b6;
    --line: #2a2745;
    --line-2: #393557;
    --accent: #9d8bff;
    --accent-ink: #b5a8ff;
    --accent-wash: #272150;
    --danger: #ff8a7e;
    --ok: #6fd6a2;
    --paper: #f4f2ff;
    --sun-ink: #ffd36b;
    --sun-wash: #3a2f12;
    --tint-lilac: #221d42;
    --tint-sun: #2c2617;
    --tint-leaf: #15291f;
    --tint-sky: #142536;
    --tint-pink: #2e1a2a;
    --scene-sky: #12101f;
    --scene-ground: #1d1838;
    --scene-kerb: #2f2858;
    --scene-back: #1b1833;
    --scene-window: #3b356a;
    --scene-cloud: #1c1934;
    --scene-night: 1;
  }
}

/* illustration colour classes, used by the generated SVG artwork */
.c-paper { fill: var(--paper); } .c-ink { fill: var(--ink); } .c-violet { fill: var(--violet); }
.c-sun { fill: var(--sun); } .c-leaf { fill: var(--leaf); } .c-sky { fill: var(--sky); }
.c-coral { fill: var(--coral); } .c-pink { fill: var(--pink); } .c-lilac { fill: var(--lilac); }
.s-ink { stroke: var(--ink); } .s-violet { stroke: var(--violet); } .s-sun { stroke: var(--sun); } .s-leaf { stroke: var(--leaf); }
.s-sky { stroke: var(--sky); } .s-coral { stroke: var(--coral); } .s-pink { stroke: var(--pink); } .s-lilac { stroke: var(--lilac); }
.c-tint-lilac { fill: var(--tint-lilac); } .c-tint-sun { fill: var(--tint-sun); } .c-tint-leaf { fill: var(--tint-leaf); }
.c-tint-sky { fill: var(--tint-sky); } .c-tint-pink { fill: var(--tint-pink); }
.blend { isolation: isolate; }
.blend circle { mix-blend-mode: multiply; }
:root[data-theme="dark"] .blend circle { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .blend circle { mix-blend-mode: screen; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* ---------------------------------------------------------------- type stacks per language
   Content in another language carries lang="…" (and dir="rtl" where needed). The stacks are
   recomputed on every element with a lang attribute, so Chinese, Japanese and Korean text each get
   fonts with the right glyph forms instead of whichever CJK font happens to come first. */
:lang(zh-Hant), :lang(zh-TW), :lang(zh-HK) { --f-cjk: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC"; }
:lang(ja) { --f-cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP"; }
:lang(ko) { --f-cjk: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR"; }
:root, [lang] {
  --f-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, var(--f-cjk), sans-serif;
  --f-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", var(--f-cjk), sans-serif;
}
/* blocks of foreign-language text restate their font so the stack above takes effect
   (inline spans simply inherit their surroundings) */
:where([lang]:not(html, span, a, time)) { font-family: var(--f-text); }
/* Chinese, Japanese and Korean: no tracking (the Latin display type is tightly tracked), a little
   more leading, and no faux italics */
:is(:lang(zh), :lang(ja), :lang(ko)) { letter-spacing: 0 !important; line-break: strict; }
:is(h1, h2, h3, h4):is(:lang(zh), :lang(ja), :lang(ko)) { line-height: 1.25; }
:is(em, i):is(:lang(zh), :lang(ja), :lang(ko)) { font-style: normal; font-weight: 600; }

body { margin: 0; background: var(--bg); color: var(--ink); }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--sun-wash); color: var(--ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; }
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}