/* TNG — design tokens. Look stolen from LoudPixel's D2-inspired dark theme
   (docs/design_handoff_public_site); the accent is recolored cyan -> green.
   Variable NAMES are unchanged so every page/inline-style rethemes for free;
   only the values flipped light->dark and orange->green. */
@import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5/index.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5/index.css");

:root {
  /* surfaces (LoudPixel black stack) */
  --tng-page:  #050505;
  --tng-panel: #0D0D0D;
  --tng-card:  #0D0D0D;
  --tng-elev:  #141414;
  /* borders */
  --tng-bd-subtle: #161616;
  --tng-bd:        #1E1E1E;
  --tng-bd-hover:  #2A2A2A;
  /* text */
  --tng-fg:  #EFEFEF;
  --tng-fg2: #9A9A9A;
  --tng-fg3: #7A7A7A;
  /* accent — GREEN (LoudPixel's cyan #00EAFF, recolored) */
  --tng-accent:     #00E599;   /* the brand accent */
  --tng-accent-2:   #39F2B0;   /* hover / lift */
  --tng-accent-ink: #001B12;   /* text sitting on the accent */
  --tng-accent-dim: #0B3D2C;   /* tinted fills */
  /* legacy accent aliases — pages still say --tng-orange */
  --tng-orange:     var(--tng-accent);
  --tng-orange-dim: var(--tng-accent-dim);
  /* semantic */
  --tng-ink:    #141414;   /* elevated dark surface (bars / preview frame) */
  --tng-danger: #FF4D6A;
  --tng-amber:  #FFB347;
  --tng-green:  #34D399;   /* success / pass */
  /* radii */
  --tng-r-sm: 6px;  --tng-r-md: 10px;  --tng-r-lg: 14px;
  --tng-sans: "Geist Variable", "Inter", -apple-system, system-ui, sans-serif;
  --tng-mono: "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;

  /* aliases for the market/blog pages' local scheme (their fallbacks were light) */
  --bg:     var(--tng-page);
  --ink:    var(--tng-fg);
  --line:   var(--tng-bd);
  --card:   var(--tng-panel);
  --accent: var(--tng-accent);
  --font:   var(--tng-sans);
}
html { color-scheme: dark; }
.tng, .tng * { box-sizing: border-box; }
.tng { font-family: var(--tng-sans); color: var(--tng-fg); background: var(--tng-page);
       -webkit-font-smoothing: antialiased; }
::selection { background: rgba(0,229,153,.22); color: var(--tng-fg); }