/* kusio.net — base
   Only what can't live on the element: palette, face declarations, document reset, links.
   Per-element styling stays inline; see PROJECT-SUMMARY.md > Styling. */

:root{
  /* purples — four, and no fifth */
  --purple:#2D1B4E;          /* base: the ground for every dark section */
  --panel:#4A2A7A;           /* one step up: open cards, splatter fill, gradient centre */
  --well:#1E1236;            /* one step down: closed cards, thumbs, gradient edge */
  --border:#5C4A82;          /* every hairline on purple; also the nav active link */

  /* brights — these only ever carry black ink */
  --lime:#C6FF00;
  --pink:#FF1B8D;
  --orange:#FF6B00;

  /* neutrals */
  --paper:#FAFAFA;
  --ink:#1A1A1A;
  --white:#FFFFFF;
  --off-white:#F1EFF4;

  /* type */
  --text-bright:#F0E8F6;     /* highlight lines */
  --text-on-dark:#E9DFF2;    /* body on purple */
  --muted-on-dark:#B9AECF;
  --text-on-light:#4A4155;   /* body on paper */
  --muted-on-light:#6B6577;

  /* rules on light grounds */
  --rule-light:#E4E0EA;
  --rule-mid:#DAD5E2;

  /* channel triplets — for the alpha variants below, so a palette change reaches them too */
  --purple-rgb:45 27 78;
  --panel-rgb:74 42 122;
  --well-rgb:30 18 54;
  --lime-rgb:198 255 0;
  --ink-rgb:26 26 26;

  /* purple grounds are never a flat fill */
  --ground:radial-gradient(125% 95% at 50% 38%, var(--panel) 0%, var(--purple) 55%, var(--well) 100%);
}

@font-face{font-family:Heuvel;src:url('../fonts/HeuvelGrotesk-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Heuvel;src:url('../fonts/HeuvelGrotesk-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Heuvel;src:url('../fonts/HeuvelGrotesk-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Heuvel;src:url('../fonts/HeuvelGrotesk-Black.woff2') format('woff2');font-weight:900;font-display:swap}

html{scroll-behavior:auto}
body{margin:0;background:var(--purple);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--lime);text-decoration:none}
a:hover{color:var(--pink)}
input,textarea{font-family:Archivo,system-ui,sans-serif}
[data-reveal]{will-change:transform,opacity}