/* ============================================================================
   yourpass design tokens — single source of truth.

   Every page that uses our amber-on-dark visual language (chat.html, admin.html,
   any future SPA) should <link> this file FIRST, before its own <style> block.
   That way the rules below act as defaults; a page can still override an
   individual var() in its own :root if it really needs a one-off.

   Naming:
     --void / --abyss / --base / --surface / --elevated  → background depths
     --hair / --thin / --line / --bright                  → divider opacities
     --phosphor + --phosphor-hi / --phosphor-dim          → brand accents
     --live / --warn / --danger / --info                  → signals
     --text / --text-dim / --text-mute / --text-ghost     → fg ladder
     --font-mono / --font-prose                           → families
     --fs-* / --gap-* / --pad-* / --radius-* / --shadow-* → layout primitives
     --sidebar-width / --page-max-width / --page-padding  → app chrome

   Don't redeclare these in page <style> blocks unless you really mean to.
   Don't add hex colors inline in HTML — pick the closest token and
   ``style="background:var(--surface)"`` instead.
   ============================================================================ */
:root {
  /* Surfaces — chat is authoritative; admin uses a slightly lighter
     parallel set in its own :root for now. */
  --void:     #000000;
  --abyss:    #030406;
  --base:     #07090d;
  --surface:  #0b0e14;
  --elevated: #11151d;
  --inset:    rgba(0, 0, 0, 0.5);

  /* Hairline borders, white at alpha. */
  --hair:   rgba(255, 255, 255, 0.05);
  --thin:   rgba(255, 255, 255, 0.10);
  --line:   rgba(255, 255, 255, 0.16);
  --bright: rgba(255, 255, 255, 0.32);

  /* Brand. */
  --phosphor:     #f59e0b;
  --phosphor-hi:  #fbbf24;
  --phosphor-dim: #92400e;

  /* Status / signal colors. */
  --live:   #84cc16;
  --warn:   #fb923c;
  --danger: #ef4444;
  --info:   #67e8f9;

  /* Foreground ladder. */
  --text:       #fafafa;
  --text-dim:   #c4c4c4;
  --text-mute:  #8b8b8b;
  --text-ghost: #6e6e6e;

  /* Fonts. */
  --font-mono:  'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-prose: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", sans-serif;

  /* Type scale (component-ready px). The CJK ratio means raw px works
     better than em for our mixed Latin / Chinese strings. */
  --fs-2xs: 9px;
  --fs-xs:  10px;
  --fs-sm:  11px;
  --fs-md:  12px;
  --fs-lg:  13px;
  --fs-xl:  14px;
  --fs-h3:  16px;
  --fs-h2:  18px;
  --fs-h1:  22px;
  --fs-hero: 32px;

  /* Common letter-spacing presets — uppercase mono labels feel airless
     without explicit tracking. */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-loose:  0.08em;
  --ls-caps:   0.14em;
  --ls-mega:   0.18em;

  /* Spacing scale. */
  --gap-2xs:  4px;
  --gap-xs:   6px;
  --gap-sm:   8px;
  --gap-md:   12px;
  --gap-lg:   16px;
  --gap-xl:   22px;
  --gap-2xl:  32px;

  /* Container padding — bigger on hero pages (keys view, admin lists),
     tighter on chat. */
  --pad-card:    22px;
  --pad-page:    36px;
  --pad-tight:   14px;

  /* Radii — we mostly run square, but a couple of rounded utility tokens
     are here so the rare exception stays explicit. */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;

  /* Shadows. We use them sparingly — a single hovering modal / dropdown
     elevation, otherwise everything is hairline-bordered flat. */
  --shadow-card:  none;
  --shadow-pop:   0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 14px 30px rgba(0, 0, 0, 0.65);

  /* App chrome. */
  --sidebar-width:  260px;     /* was 220px; widened so 账户 / API KEYS read */
  --page-max-width: 1280px;    /* matches admin .container max-width */
}