/* ==========================================================================
   Key Lair — Design Tokens: Light theme
   Same custom-property names as tokens.css (every other stylesheet only
   ever references var(--x), never a hardcoded color) — swapping which
   tokens file loads re-themes the whole site with no other file involved.
   ========================================================================== */

:root{
  /* See tokens.css (Default theme) for why this is needed. Explicit here
     too rather than just omitting it, so this theme's widgets stay
     light-themed even for a visitor whose OS/browser default is dark. */
  color-scheme: light;

  /* Surfaces */
  --bg-void:#f4f6f8;      /* page background */
  --bg-panel:#ffffff;     /* card / panel background */
  --bg-panel-2:#eef1f4;   /* hover / secondary panel background */
  --sidebar:#ffffff;      /* admin sidebar background */
  --line:#dde3e8;         /* default border color */
  --line-soft:#e7ecf0;    /* subtler border, hover states */

  /* Text */
  --text-primary:#1c2733;
  --text-muted:#5b6672;
  --text-faint:#8a97a3;

  /* Accents */
  --signal:#2f7fc1;       /* blue — active/selected states */
  --signal-dim:#6fa8d8;   /* muted blue — gradients, secondary emphasis */
  --key-gold:#5d8f22;     /* green — key codes, highlighted values (named key-gold for historical/variable-naming reasons, but is green) */
  --danger:#c94a34;       /* errors, sold-out / disabled states */

  /* Radius scale */
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;

  /* Type */
  --font-display:'Space Grotesk', sans-serif;   /* headings */
  --font-body:'Inter', sans-serif;               /* body copy, UI labels */
  --font-mono:'JetBrains Mono', monospace;       /* key codes, timestamps, data */
}

/* Base reset — shared by every page */
*{
  box-sizing:border-box;
}
html,body{
  margin:0;
  padding:0;
}
