/* ============================================================
 * NeonBela — Design Tokens (Cyberpunk)
 *
 * Cyberpunk is the canonical NeonBela aesthetic: a high-contrast
 * dark interface with vibrant neon accents and glassmorphism.
 * Source of truth: src/styles/themes.ts → CYBERPUNK_THEME.
 *
 * Apply via `:root` (global) or scope to a subtree.
 * ============================================================ */

:root {
  /* ---------- Surfaces ---------- */
  --bg-primary: #050510;               /* page background — near-black indigo */
  --bg-secondary: #0a0a15;             /* cards, panels, headers */
  --bg-header: #0a0a15;
  --bg-overlay: rgba(5, 5, 16, 0.8);   /* modal scrims */

  /* ---------- Borders ---------- */
  --border-subtle: rgba(255, 255, 255, 0.10);  /* hairlines between surfaces */
  --border-strong: rgba(0, 243, 255, 0.50);    /* brand-tinted emphasis */
  --border-focus: #00f3ff;                     /* active input / keyboard focus */

  /* ---------- Text ---------- */
  --text-primary: #ffffff;     /* headings, body copy */
  --text-secondary: #9ca3af;   /* labels, metadata */
  --text-muted: #6b7280;       /* disabled, timestamps */
  --text-accent: #00f3ff;      /* brand links, highlights */
  --text-inverse: #000000;     /* text on white surfaces */
  --text-on-neon: #000000;     /* text on filled neon buttons */
  --text-header: #ffffff;

  /* ---------- Accents ---------- */
  --accent-brand:     #00f3ff; /* Cyan   — primary brand */
  --accent-success:   #00ff9d; /* Green  — positive states */
  --accent-warning:   #ffe600; /* Yellow — cautionary states */
  --accent-danger:    #ff2a2a; /* Red    — destructive, critical */
  --accent-highlight: #ff00ff; /* Magenta — secondary accent */

  /* ---------- Issue categories ---------- */
  --issue-power:      #ffe600; /* Yellow  */
  --issue-water:      #00f3ff; /* Cyan    */
  --issue-sanitation: #00ff9d; /* Green   */
  --issue-road:       #ff2a2a; /* Red     */
  --issue-security:   #ff00ff; /* Magenta */

  /* ---------- Status ---------- */
  --status-open:     #ff2a2a;
  --status-progress: #ffe600;
  --status-resolved: #00ff9d;

  /* ---------- Effects ---------- */
  --fx-glow: 0 0 10px;                             /* use: box-shadow: var(--fx-glow) var(--accent-brand) */
  --fx-radius: 0.25rem;                            /* 4px — sharp, technical */
  --fx-border: 1px solid var(--border-subtle);
  --fx-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.30);
  --fx-blur: blur(10px);                           /* glass backdrop-filter */

  /* ---------- Typography stack ---------- */
  --font-display: "Inter", sans-serif;             /* Titles, brand — Inter 700/800 */
  --font-body:    "Inter", sans-serif;             /* UI & body */
  --font-mono:    "Inter", sans-serif;             /* metadata — Inter 500, tracked */

  /* ---------- Type scale ---------- */
  --fs-xxs:  0.625rem;   /* 10px — stamps, uppercase eyebrow */
  --fs-xs:   0.75rem;    /* 12px — metadata */
  --fs-sm:   0.875rem;   /* 14px — secondary body */
  --fs-base: 1rem;       /* 16px — body */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.25rem;    /* 20px */
  --fs-2xl:  1.5rem;     /* 24px — section heads */
  --fs-3xl:  1.875rem;   /* 30px — login / feature titles */
  --fs-4xl:  2.25rem;    /* 36px — hero */

  /* ---------- Letter-spacing presets ---------- */
  --tracking-tight:   -0.02em;   /* Orbitron display */
  --tracking-normal:  0;
  --tracking-wide:    0.15em;    /* all-caps labels */
  --tracking-widest:  0.25em;    /* mono eyebrows */
}