/* Velnode Web Dashboard — design tokens (dark).
   Self-contained subset of the repo tokens.css --velora-* vocabulary (the SPA
   is served standalone and can't link the canon-anchored root tokens.css).
   Values copied verbatim from tokens.css. styles.css uses ONLY these tokens
   (no raw hex) per CLAUDE.md §3. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('fonts/inter-var-latin.woff2') format('woff2');
}
:root {
  /* Surfaces */
  --velora-bg:            #061a2a;
  --velora-bg-deep:       #021726;
  --velora-bg-card:       #001a2a;
  --velora-bg-page:       #02101c;
  --velora-bg-raised:     #11203a;
  /* Borders */
  --velora-border:        #003344;
  --velora-border-soft:   #063a57;
  --velora-border-strong: #005577;
  /* Brand */
  --velora-accent:        #00ccff;
  --velora-accent-2:      #00e5ff;
  --velora-accent-soft:   rgba(0, 204, 255, 0.12);
  --velora-accent-glow:   rgba(0, 204, 255, 0.22);
  /* Text */
  --velora-text:          #ccefff;
  --velora-text-strong:   #eafaff;
  --velora-text-muted:    #88cfff;
  --velora-text-soft:     #88e0ff;
  --velora-text-on-accent:#001a2a;
  /* Status */
  --velora-success:       #00e5b5;
  --velora-success-soft:  rgba(0, 229, 181, 0.14);
  --velora-success-edge:  rgba(0, 229, 181, 0.32);
  --velora-danger:        #ff5b6e;
  --velora-danger-soft:   rgba(255, 91, 110, 0.14);
  --velora-danger-edge:   rgba(255, 91, 110, 0.32);
  --velora-warn:          #ffc107;
  --velora-warn-soft:     rgba(255, 193, 7, 0.12);
  --velora-warn-edge:     rgba(255, 193, 7, 0.32);
  /* Effects */
  --velora-shadow-card:   0 16px 40px rgba(0, 0, 0, 0.45);
  --velora-overlay-modal: rgba(0, 0, 0, 0.55);
  --velora-focus-ring:    0 0 0 2px var(--velora-accent-glow);
  /* Type */
  --velora-font-sans:     'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  /* Spacing (4/8/12/16/24/32) */
  --velora-space-1: 4px;
  --velora-space-2: 8px;
  --velora-space-3: 12px;
  --velora-space-4: 16px;
  --velora-space-6: 24px;
  --velora-space-8: 32px;
  /* Radius */
  --velora-radius-100: 8px;
  --velora-radius-200: 16px;
  --velora-radius-300: 24px;
  --velora-radius-pill: 999px;
  /* Stage 4b avatar palette — 8 distinct identity colours (initials chips).
     Stored server-side as a KEY ('aqua'…'rose'); the SPA maps key→token so no
     raw hex lives in components. Dark text (--velora-text-on-accent) reads AA+
     on every one of these bright fills. */
  --velora-avatar-aqua:   #00ccff;
  --velora-avatar-mint:   #00e5b5;
  --velora-avatar-violet: #9b8cff;
  --velora-avatar-coral:  #ff7a85;
  --velora-avatar-amber:  #ffc94d;
  --velora-avatar-blue:   #4aa8ff;
  --velora-avatar-orange: #ff9a4d;
  --velora-avatar-rose:   #ff86c8;
}