/* =========================================================================
   Heights Telecom — Theme tokens
   -------------------------------------------------------------------------
   Two distribution flavors share the same token surface so every component
   reads from a single variable set. Switching themes is just a values swap.
   Token format is `H, S%, L%` so it composes with Tailwind's `hsl(var(--x))`.
   ========================================================================= */

:root {
  /* ---- Heights (BE / BEM) – premium dark UI -------------------------- */
  --textColor: 220, 14%, 96%;
  --textColorSVG: 220, 14%, 96%;
  --SVGColor: 220, 14%, 96%;
  --elementBG: 232, 20%, 14%;
  --elementShadow: 234, 24%, 18%;
  --subcqatgories: 211, 100%, 60%;
  --curveShape: 224, 70%, 32%;
  --mainBackground: 234, 26%, 10%;
  --advColor: 211, 100%, 60%;
  --advText: 0, 0%, 100%;
  --networkMapShadow: 234, 18%, 30%;
  --buttonColor: 211, 100%, 56%;
  --buttonText: 0, 0%, 100%;
  --logo: url("/Logos/heights_logo.png");
  --scroll: 234, 18%, 22%;
  --loginPlaceholder: 220, 12%, 60%;
  --loginPlaceholderText: 'Enter your password';

  /* ---- Brand & semantic accents (shared by both themes) -------------- */
  --brand-1: 211, 100%, 60%;      /* electric azure */
  --brand-2: 196, 100%, 52%;      /* bright cyan */
  --brand-3: 224, 85%, 56%;       /* royal blue */
  --brand-glow: 211, 100%, 60%;

  /* ---- Surfaces (layered cards) ------------------------------------- */
  --surface-1: 232, 21%, 12%;
  --surface-2: 232, 19%, 15%;
  --surface-3: 232, 17%, 19%;
  --border-soft: 232, 15%, 26%;
  --border-strong: 232, 18%, 33%;
  --ring-soft: 211, 90%, 66%;

  /* ---- Status colors ------------------------------------------------- */
  --success: 152, 70%, 50%;
  --warning: 38, 95%, 60%;
  --risk-medium: 48, 96%, 53%; /* yellow — medium leak risk */
  --risk-high: 25, 95%, 55%; /* orange — high leak risk */
  --danger: 0, 84%, 62%; /* red — critical */
  --info: 199, 95%, 60%;

  /* ---- Cellcom values are kept commented for reference  -------------- */
  /* --textColor: 0, 0%, 8%; */
  /* --textColorSVG: 0, 0%, 8%; */
  /* --SVGColor: 0, 0%, 8%; */
  /* --elementBG: 0, 0%, 100%; */
  /* --elementShadow: 270, 60%, 88%; */
  /* --subcqatgories: 269, 85%, 56%; */
  /* --curveShape: 270, 100%, 76%; */
  /* --mainBackground: 0, 0%, 98%; */
  /* --advColor: 270, 100%, 56%; */
  /* --networkMapShadow: 270, 12%, 90%; */
  /* --advText: 0, 0%, 100%; */
  /* --buttonColor: 270, 100%, 56%; */
  /* --buttonText: 0, 0%, 100%; */
  /* --scroll: 270, 12%, 86%; */
  /* --surface-1: 0, 0%, 100%; */
  /* --surface-2: 0, 0%, 99%; */
  /* --surface-3: 270, 30%, 96%; */
  /* --border-soft: 270, 15%, 90%; */
  /* --border-strong: 270, 18%, 80%; */
  /* --logo: url("/Logos/cellcom_logo.png"); */
  /* --loginPlaceholder: 0, 0%, 70%; */
  /* --loginPlaceholderText: "Enter password"; */
}

/* ===========================================================================
   Light theme — applied when the user toggles "light" mode. The class
   `.theme-light` lives on the <html> element so every nested component
   reads the swapped variables. Brand & semantic accents keep the same
   hue so the network map still feels like Heights.
   =========================================================================== */
:root.theme-light {
  --textColor: 232, 22%, 14%;
  --textColorSVG: 232, 22%, 14%;
  --SVGColor: 232, 22%, 14%;
  --elementBG: 0, 0%, 100%;
  --elementShadow: 211, 30%, 88%;
  --subcqatgories: 211, 90%, 50%;
  --curveShape: 211, 70%, 80%;
  --mainBackground: 232, 30%, 96%;
  --advColor: 211, 90%, 50%;
  --advText: 0, 0%, 100%;
  --networkMapShadow: 232, 18%, 84%;
  --buttonColor: 211, 90%, 50%;
  --buttonText: 0, 0%, 100%;
  --scroll: 232, 18%, 80%;
  --loginPlaceholder: 232, 12%, 60%;

  /* Brand accents stay (slightly darker for contrast on white) */
  --brand-1: 211, 90%, 48%;
  --brand-2: 196, 90%, 46%;
  --brand-3: 224, 85%, 50%;
  --brand-glow: 211, 90%, 48%;

  /* Layered light surfaces */
  --surface-1: 0, 0%, 100%;
  --surface-2: 232, 28%, 98%;
  --surface-3: 232, 25%, 95%;
  --border-soft: 232, 18%, 88%;
  --border-strong: 232, 20%, 78%;
  --ring-soft: 211, 85%, 56%;

  /* Status colors hold the same hue but a touch darker so they stay
     readable against the bright surfaces. */
  --success: 152, 65%, 38%;
  --warning: 38, 88%, 48%;
  --risk-medium: 48, 90%, 42%;
  --risk-high: 25, 90%, 45%;
  --danger: 0, 78%, 50%;
  --info: 199, 88%, 48%;
}