/* ============================================================
   Akhil Ranjith — Design System · Color tokens
   Distilled from the live site. Variable names that already
   existed on the site are kept verbatim so the system is a
   drop-in source of truth; promoted (formerly hardcoded)
   values are grouped below.
   ============================================================ */
:root {
  /* ---- Brand ---- */
  --bg: #000; /* page background */
  --white: #fff; /* primary text on dark */
  --blue: #2357e8; /* primary accent (headline highlight) */
  --magenta: #c226ed; /* secondary accent (headline highlight) */

  /* ---- UI: navigation & fields ---- */
  --nav: rgba(255, 255, 255, 0.6); /* idle nav link */
  --field-line: rgba(255, 255, 255, 0.35); /* underline for line-style fields */
  --field-ph: rgba(255, 255, 255, 0.9); /* input placeholder (on dark) */
  --field-text: #fff; /* typed input text */

  /* ---- Lines & borders  (promoted from component rules) ---- */
  --hairline: rgba(255, 255, 255, 0.4); /* brand divider */
  --btn-border: rgba(255, 255, 255, 0.85); /* outlined button rest */
  --btn-border-hover: rgba(255, 255, 255, 0.95);
  --frame-border: #b2b2b2; /* art showcase frame */

  /* ---- Electric-blue glow family  (promoted) ---- */
  --glow-bright: #38b6ff; /* under-bar highlight */
  --glow-core: #0179c9; /* glow core (rgb 1 121 201) */

  /* ---- Misc accents  (promoted) ---- */
  --linkedin: #6666ff; /* LinkedIn icon */
}