/* THE SITE'S TOKENS: the only file of the site a hex may appear in (site/tools/check.mjs holds it).
 *
 * A subset of the app's src/renderer/source/styles/tokens.css (the finish, 2026-11-08), copied, not linked: the site ships on its
 * own. Mint on the dark, the app's default; the site is dark only (owner, 2026-11-09). Values are the app's; when its mint moves,
 * move it here too.
 *
 * THE LIGHT. As in the app, the light in the page is the verdict (html[data-light], the app's _lightOf): offline cold, dialling
 * amber, secured the theme's mint, a Tor route violet, a held drop amber, exposed red. It reaches every lit thing through one
 * registered colour, --lit, and its strength --amt, so a change of verdict fades instead of jumping.
 *
 * Rules for site.css: every colour is var(--...); a tint is rgba(var(--x), a) on a triple of this file or a color-mix of --lit;
 * a radius is a --r-* token; a size is on the --fs-* scale (11px is the floor); a font is --sans or --mono. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/manrope-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: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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;
}

/* the light, registered so it can fade */
@property --lit { syntax: '<color>'; inherits: true; initial-value: rgb(112, 148, 170); }
@property --amt { syntax: '<number>'; inherits: true; initial-value: .34; }

:root {
  color-scheme: dark;
  /* what a surface is made of: triples, read as rgba(var(--f-x), a) */
  --f-ink: 255, 255, 255;
  --f-glass: 6, 11, 10;
  --f-shade: 0, 0, 0;
  --f-key: 255, 255, 255;
  --f-keytext: 2, 7, 6;
  --f-keytop: rgb(255, 255, 255);
  /* the theme, mint: the void, the land, the light, its falloff */
  --f-void: 2, 7, 6;
  --f-land: 9, 19, 17;
  --f-a: 61, 245, 158;
  --f-b: 18, 196, 160;
  /* the lights the verdict picks from */
  --f-cold: 112, 148, 170;
  --f-tor: 177, 140, 242;
  --f-warn: 232, 213, 107;
  --f-err: 224, 122, 122;
  /* the light now: offline's cold until a page says otherwise (html[data-light] below) */
  --f-tone: var(--f-cold);
  --lit: rgb(var(--f-tone));
  --amt: .34;

  --ground: rgb(var(--f-void));
  --land: rgb(var(--f-land));
  --plate-lo: rgba(var(--f-ink), .025);
  --plate: rgba(var(--f-ink), .04);
  --plate-hi: rgba(var(--f-ink), .06);
  --well: rgba(var(--f-ink), .05);
  --rim-soft: rgba(var(--f-ink), .07);
  --rim: rgba(var(--f-ink), .11);

  --text: #f5f8f7;
  --text-2: #b4c0bc;
  --text-3: #8d9a95;
  --text-4: #5d6a65;
  --text-rgb: 245, 248, 247;

  --acc: #3df59e;
  --acc-rgb: 61, 245, 158;
  --warn: #e8d56b;
  --warn-rgb: 232, 213, 107;
  --err: #e07a7a;
  --err-rgb: 224, 122, 122;
  --tor: #b18cf2;
  --tor-rgb: 177, 140, 242;
  --info: #7fb4f2;
  /* Pip's eyes: the app paints them #062b1a on every theme (pip-ghost.js) */
  --pip-eye: #062b1a;
  --f-logo: var(--acc);

  /* depth: light and glass; only what floats has a real shadow; the light comes from --lit */
  --depth-top: inset 0 1px 0 rgba(var(--f-ink), .07);
  --f-card-lift: linear-gradient(180deg, color-mix(in srgb, var(--lit) calc(var(--amt) * 12% + 3%), transparent), rgba(var(--f-ink), .02) 46%, rgba(var(--f-ink), .012));
  --f-card-edge: linear-gradient(170deg, rgba(var(--f-ink), .34), color-mix(in srgb, var(--lit) calc(var(--amt) * 40% + 6%), transparent) 26%, rgba(var(--f-ink), .05) 58%, rgba(var(--f-ink), .1));
  --f-card-shadow: 0 30px 70px -18px rgba(var(--f-shade), .8), 0 0 90px -30px color-mix(in srgb, var(--lit) calc(var(--amt) * 50%), transparent);
  --f-edge-mask: linear-gradient(rgb(var(--f-shade)) 0 0) content-box, linear-gradient(rgb(var(--f-shade)) 0 0);
  --f-glass-solid: rgba(var(--f-glass), .94);
  --f-row-lit: linear-gradient(90deg, color-mix(in srgb, var(--lit) calc(var(--amt) * 20% + 5%), transparent), color-mix(in srgb, var(--lit) 2%, transparent));
  --f-card-fall: linear-gradient(180deg, rgba(var(--f-ink), .05), rgba(var(--f-ink), .022));
  --f-air: radial-gradient(ellipse 80% 60% at 70% -4%, color-mix(in srgb, var(--lit) calc(var(--amt) * 14%), transparent), transparent 72%);
  --f-glow: 0 0 16px -2px color-mix(in srgb, var(--lit) calc(var(--amt) * 80%), transparent);

  /* keys (the app's keys.css): glass, no rim, no base; the main key a surface of light */
  --sk-h-l: 46px;
  --sk-h-main: 52px;
  --sk-h-m: 38px;
  --sk-h-s: 28px;
  --sk-face: rgba(var(--f-ink), .05);
  --sk-face-hover: rgba(var(--f-ink), .09);
  --sk-face-on: rgba(var(--f-ink), .1);
  --sk-top: inset 0 1px 0 rgba(var(--f-ink), .07);
  --sk-top-hover: inset 0 1px 0 rgba(var(--f-ink), .12);
  --sk-ring-off: inset 0 0 0 1px rgba(var(--f-ink), .1);
  --sk-connect-face: linear-gradient(180deg, rgba(var(--f-a), 0) 35%, rgba(var(--f-a), .2)), rgb(var(--f-key));
  --sk-lit-ok: inset 0 1px 0 var(--f-keytop);
  --sk-lit-bad: inset 0 0 0 1px rgba(var(--err-rgb), .45);
  --sk-lit-warn: inset 0 1px 0 rgba(var(--warn-rgb), .2);
  --sk-press: scale(.965);
  --sk-press-main: scale(.985);
  --sk-dim: brightness(.95);
  /* the switch (the app's finish .switch) */
  --sw-track: rgba(var(--f-ink), .11);
  --sw-on: linear-gradient(180deg, rgb(var(--f-a)), rgb(var(--f-b)));
  --sw-thumb: rgb(216, 224, 221);

  /* radius (the finish's larger corners) */
  --r-card: 18px;
  --r-plate: 16px;
  --r-main: 14px;
  --r-key: 12px;
  --r-in: 9px;
  --r-chip: 6px;
  --r-bar: 2px;
  --r-round: 50%;
  --r-pill: 999px;

  /* type: Manrope for words, JetBrains Mono only for data (a file name, a hash, an address, a command) */
  --sans: 'Manrope', 'Segoe UI Variable Text', 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Segoe UI Variable Text', 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', ui-monospace, monospace;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-36: 36px;
  /* the site's display sizes, above the app's scale: a page's headline and the home's */
  --fs-44: 44px;
  --fs-display: clamp(40px, 6.2vw, 80px);

  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;
  --sp-128: 128px;

  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-in: cubic-bezier(.4, 0, .6, 1);
  --t-glass: .25s;
  --t-fade: .2s;
  --t-state: .32s;
  --t-rise: .6s;
  --t-light: 1.1s;
  --t-sonar: 2.4s;

  transition: --lit var(--t-light) var(--ease-expo), --amt var(--t-light) var(--ease-expo);
}

/* the light, by verdict (the app's tokens.css html[data-light], amounts its own) */
:root[data-light="first"] { --amt: .24; }
:root[data-light="ok"] { --f-tone: var(--f-a); --amt: 1; }
:root[data-light="tor"] { --f-tone: var(--f-tor); --amt: 1; }
:root[data-light="warn"] { --f-tone: var(--f-warn); --amt: .65; }
:root[data-light="dial"] { --f-tone: var(--f-warn); --amt: .6; }
:root[data-light="held"] { --f-tone: var(--f-warn); --amt: .5; }
:root[data-light="closing"] { --f-tone: var(--f-warn); --amt: .4; }
:root[data-light="bad"] { --f-tone: var(--f-err); --amt: .85; }