:root {
  /* Color / theme palettes (defaults for dark mode) */
  --text-color: #d9d9d9;
  --pannel-box: linear-gradient(180deg, #02324e 5%, #085266 50%, #02324e 95%);
  --bg-color: radial-gradient(
    ellipse at 50% 40%,
    #1f304b 0%,
    #14243e 40%,
    #0a1931 75%,
    #05142d 100%
  );
  --bg-linear: linear-gradient(
    to top,
    rgba(8, 14, 24, 1) 0%,
    rgba(34, 56, 78, 0.45) 60%
  );

  /* Particle variables (can be overridden by .light-mode) */
  --particle-color: rgba(255, 255, 255, 1);
  --particle-shadow-alpha: 0.22;
  --particle-blend-mode: lighter;

  /* Font sizes */
  --font-size-header-title: clamp(1.5rem, 3.5vw, 2.5rem);
  --font-size-value-text: clamp(1.4rem, 3vw, 2rem);
  --font-size-section-title: clamp(1.2rem, 2.7vw, 1.7rem);
  --font-size-section-subtitle: clamp(1rem, 2.5vw, 1.5rem);
  --font-size-base: clamp(0.8rem, 2.2vw, 1.3rem);
  --font-size-buttons: clamp(0.7rem, 2vw, 1rem);

  /* Card sizes */
  --card-radius: 14px;
  --card-lateral: 18px;
  --card-lift: -14px;

  /* Small constants */
  --transition-fast: 180ms;
  --transition-med: 240ms;
  --box-shadow: 0 4px 15px rgba(217, 217, 217, 0.52);

  /* Z-index system */
  --z-canvas: -1000;
  --z-base: 0;
  --z-topbar: 1000;
  --z-ui: 2000;
  --z-overlay: 3000;
}

/* Light mode overrides */
.light-mode {
  --pannel-box: linear-gradient(180deg, #4081a7 5%, #6fbeec 50%, #4081a7 95%);
  --text-color: #0a111a;
  --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  --bg-color: radial-gradient(
    ellipse at 50% 40%,
    #80acee 0%,
    #5c88ca 40%,
    #436fb1 75%,
    #2f5a9b 100%
  );
  --bg-linear: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 0%,
    rgba(235, 241, 248, 0.6) 60%
  );
  --particle-color: rgba(10, 10, 40, 0.98);
  --particle-shadow-alpha: 0.32;
  --particle-blend-mode: source-over;
}