:root {
  /* Marca */
  --color-primary: #007766;
  --color-secondary: #2062ac;
  --color-accent: #2f184e;

  /* Radios */
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  /* Layout */
  --container-width: 1120px;
  --panel-min-height: 92vh;

  /* Spacing */
  --space-xs: 0.4rem;
  --space-sm: 0.8rem;
  --space-md: 1.6rem;
  --space-lg: 3.2rem;

  /* Tema oscuro por defecto */
  --bg-0: #181818;
  --bg-1: #070b12;

  --text-primary: rgba(255, 255, 255, 0.92);
  --text-muted: rgba(226, 232, 240, 0.72);

  --border-soft: rgba(255, 255, 255, 0.10);

  --bg-grid-line-1: rgba(255, 255, 255, 0.06);
  --bg-grid-line-2: rgba(255, 255, 255, 0.04);
  --bg-dot: rgba(255, 255, 255, 0.06);

  --surface-0: rgba(255, 255, 255, 0.03);
  --surface-1: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.05);
  --surface-3: rgba(255, 255, 255, 0.06);
  --surface-4: rgba(255, 255, 255, 0.07);
  --surface-5: rgba(255, 255, 255, 0.10);

  --footer-bg: rgba(255, 255, 255, 0.02);

  --shadow-sm: 0 10px 20px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.35);
  --shadow-button: 0 14px 28px rgba(0, 0, 0, 0.25);

  --theme-icon: "🌙";
}

:root[data-theme="light"] {
  --bg-0: #f8fbff;
  --bg-1: #edf3fa;

  --text-primary: rgba(22, 34, 49, 0.92);
  --text-muted: rgba(71, 85, 105, 0.78);

  --border-soft: rgba(148, 163, 184, 0.22);

  --bg-grid-line-1: rgba(148, 163, 184, 0.10);
  --bg-grid-line-2: rgba(148, 163, 184, 0.07);
  --bg-dot: rgba(148, 163, 184, 0.10);

  --surface-0: rgba(255, 255, 255, 0.28);
  --surface-1: rgba(255, 255, 255, 0.38);
  --surface-2: rgba(255, 255, 255, 0.48);
  --surface-3: rgba(255, 255, 255, 0.58);
  --surface-4: rgba(255, 255, 255, 0.68);
  --surface-5: rgba(255, 255, 255, 0.82);

  --footer-bg: rgba(255, 255, 255, 0.22);

  --shadow-sm: 0 10px 24px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 18px 45px rgba(15, 23, 42, 0.08);
  --shadow-button: 0 14px 28px rgba(15, 23, 42, 0.08);

  --theme-icon: "☀️";
}
:root[data-theme="dark"] {
  --theme-icon: "🌙";
}