/* Shared background (do not modify). Requires <canvas id="grid" aria-hidden="true"> as first child of body. */
/* Colour tokens for both schemes. --g, --gt and --k are bare "r,g,b" triplets for rgba(var(--g),a): --g is the glow/bloom
   colour, --gt the core teal for strokes, edges and fills that must stay readable (same as --g in dark), --k the ink.
   --gk scales glows (box/text/drop shadows), --gf scales teal fills and edges; the canvas and the JS keyframes
   read them with getComputedStyle. Dark is the default; light follows the OS, or the theme switch.
   Effect tokens (light only; each use site carries the dark value as its var() fallback, so dark is untouched):
   --gkt text-glow scale, --edge-on/--edge-hv lit and hover edges, --sw/--swr card and readout icon stroke widths,
   --cn-o card and readout corner opacity, --pk the card icons' reveal flash at its peak. */
:root {
  color-scheme: dark light;
  --bg: #06080b;
  --teal: #5fe0c8; --tealx: #5fe0c8; --flare: #c9fff4;
  --g: 95,224,200; --gt: 95,224,200; --k: 233,238,243; --gk: 1; --gf: 1;
  --ink: #e9eef3; --dim: #8995a3; --text: #c3ccd5; --mute: #8995a3;
  --sub: #b6c0ca; --cardp: #aab4bf; --draft: #7d8996;
  --hair: rgba(var(--k), .15); --tick: rgba(var(--k), .24); --corner: rgba(var(--g), .9);
  --panel: rgba(9, 13, 17, .62); --robg: rgba(8, 12, 16, .78);
  --hd1: rgba(6, 8, 11, .9); --hd2: rgba(6, 8, 11, .66); --menu: rgba(6, 8, 11, .94); --glass: rgba(6, 8, 11, .72);
  --dotc: rgba(var(--k), .09); --dotk: 1; --halo: rgba(var(--g), .06);
}
/* light: follows the OS unless the visitor picked a theme with the switch (html[data-tema], set by erken.js) */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="koyu"]) {
    color-scheme: light;
    --bg: #f3f5f7;
    --teal: #00875f; --tealx: #00664a; --flare: #005a42;
    --g: 0,170,122; --gt: 0,135,95; --k: 13,18,23; --gk: 1.15; --gf: 1.4; --gkt: .55;
    --ink: #0d1217; --dim: #56626e; --text: #2a343e; --mute: #55616d;
    --sub: #36424d; --cardp: #404c57; --draft: #5a6672;
    --hair: rgba(var(--k), .16); --tick: rgba(var(--k), .3); --corner: var(--teal);
    --panel: rgba(255, 255, 255, .66); --robg: rgba(255, 255, 255, .74);
    --hd1: rgba(243, 245, 247, .92); --hd2: rgba(243, 245, 247, .74); --menu: rgba(250, 251, 252, .97); --glass: rgba(243, 245, 247, .8);
    --dotc: rgba(var(--k), .13); --dotk: .8; --halo: rgba(var(--g), .07);
    --sw: 1.5; --swr: 1.4; --cn-o: .9;
    --edge-on: color-mix(in srgb, var(--teal) 85%, transparent); --edge-hv: var(--teal);
    /* one 8px shadow vanishes on white: a tight edge plus a wide soft aura */
    --pk: drop-shadow(0 0 2px rgba(var(--g), calc(.6 * var(--gk)))) drop-shadow(0 0 15px rgba(var(--g), calc(.6 * var(--gk))));
  }
  :root:not([data-tema="koyu"]) ::selection { background: rgba(var(--g), .24); color: var(--ink); }
}
:root[data-tema="acik"] {
    color-scheme: light;
    --bg: #f3f5f7;
    --teal: #00875f; --tealx: #00664a; --flare: #005a42;
    --g: 0,170,122; --gt: 0,135,95; --k: 13,18,23; --gk: 1.15; --gf: 1.4; --gkt: .55;
    --ink: #0d1217; --dim: #56626e; --text: #2a343e; --mute: #55616d;
    --sub: #36424d; --cardp: #404c57; --draft: #5a6672;
    --hair: rgba(var(--k), .16); --tick: rgba(var(--k), .3); --corner: var(--teal);
    --panel: rgba(255, 255, 255, .66); --robg: rgba(255, 255, 255, .74);
    --hd1: rgba(243, 245, 247, .92); --hd2: rgba(243, 245, 247, .74); --menu: rgba(250, 251, 252, .97); --glass: rgba(243, 245, 247, .8);
    --dotc: rgba(var(--k), .13); --dotk: .8; --halo: rgba(var(--g), .07);
    --sw: 1.5; --swr: 1.4; --cn-o: .9;
    --edge-on: color-mix(in srgb, var(--teal) 85%, transparent); --edge-hv: var(--teal);
    /* one 8px shadow vanishes on white: a tight edge plus a wide soft aura */
    --pk: drop-shadow(0 0 2px rgba(var(--g), calc(.6 * var(--gk)))) drop-shadow(0 0 15px rgba(var(--g), calc(.6 * var(--gk))));
}
:root[data-tema="acik"] ::selection { background: rgba(var(--g), .24); color: var(--ink); }
:root[data-tema="koyu"] { color-scheme: dark; }
html { background: var(--bg); }
body { background: var(--bg); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(var(--dotc) 1px, transparent 1.2px);
  background-size: 28px 28px;
  background-position: center;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 100%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 50% 40% at 50% 50%, var(--halo), transparent 70%);
  pointer-events: none;
}

#grid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.js body::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js body::before { opacity: 1; } }