/* SmartVolt — Color tokens
   Dark premium engineering palette. Yellow is the only accent.
   Use it sparingly: CTAs, highlights, the live electrical signal. */
:root {
  /* ---- Base brand ---- */
  --sv-yellow: #FFD400;          /* Electric Yellow — primary accent */
  --sv-yellow-bright: #FFE34D;   /* hover / lift */
  --sv-yellow-dim: #CCAA00;      /* pressed / muted accent */
  --sv-black: #000000;           /* Pure Black — main background */
  --sv-gray-900: #0D0D0D;        /* near-black sheet */
  --sv-gray-850: #141414;        /* raised surface */
  --sv-gray-800: #1A1A1A;        /* Dark Gray — secondary panels */
  --sv-gray-700: #242424;        /* panel hover / hairline fills */
  --sv-gray-600: #333333;        /* borders on dark */
  --sv-gray-500: #5E5E5E;        /* Tagline Gray — secondary text */
  --sv-gray-400: #8A8A8A;        /* muted body */
  --sv-white: #FFFFFF;           /* body text on dark */

  /* ---- Semantic surfaces ---- */
  --surface-base: var(--sv-black);
  --surface-raised: var(--sv-gray-800);
  --surface-card: var(--sv-gray-850);
  --surface-card-hover: var(--sv-gray-700);
  --surface-inverse: var(--sv-yellow);

  /* ---- Semantic text ---- */
  --text-primary: var(--sv-white);
  --text-secondary: var(--sv-gray-400);
  --text-muted: var(--sv-gray-500);
  --text-accent: var(--sv-yellow);
  --text-on-accent: var(--sv-black);

  /* ---- Borders ---- */
  --border-subtle: var(--sv-gray-600);
  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-accent: var(--sv-yellow);

  /* ---- Signal / status ---- */
  --signal-live: #3DDC84;        /* operational green */
  --signal-warn: #FFA31A;        /* load warning */
  --signal-fault: #FF4D4D;       /* fault / trip */

  /* ---- Effects ---- */
  --glow-yellow: 0 0 24px rgba(255, 212, 0, 0.35);
  --glow-yellow-soft: 0 0 60px rgba(255, 212, 0, 0.18);
}