:root {
  /* ============================================================
     THEME TOKENS
     - Default: Light (conservative)
     - Dark theme: html.dark overrides
     ============================================================ */

  /* Brand */
  --primary: #00e556;
  --primary-dim: rgba(0, 229, 86, 0.1);
  --primary-glow: #00e556;

  /* Base surfaces - matching 1hp-code.html reference */
  --secondary: #f8f9fa; /* legacy name: used as body background, matching bg-background-light */
  --bg-light: #f8f9fa; /* background-light from reference */
  --bg-dark: #050505;
  --surface-light: #ffffff; /* surface-light from reference */
  --surface-dark: #0f0f0f;
  --border-light: #e2e8f0; /* border-light from reference */
  --border-dark: #262626;

  /* Text */
  --text-main: #0b0b0b;
  --text-muted: #4b5563;
  --text-light: #374151; /* FIX: was used widely but not defined */

  /* Aliases (back-compat for existing CSS references) */
  --background-dark: var(--bg-dark);
  --background-light: var(--bg-light);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(17, 24, 39, 0.08);
  --glass-blur: 20px;

  /* Spacing */
  --container-width: 1280px;
  --header-height: 80px;
}

html.dark {
  /* Dark theme (current Matrix look) */
  --secondary: #030303;
  --text-main: #ffffff;
  --text-muted: #a0a0a0;
  --text-light: #ffffff; /* preserve current effective appearance */

  --glass-bg: rgba(10, 10, 10, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
}