/* ============================================================
   Tokens de tema — Javier Cerón · Hoja de vida / portafolio
   Tema claro personalizable vía .env · Tema oscuro fijo
   ============================================================ */

:root {
  /* El sitio maneja su propio claro/oscuro (color-scheme): evita que
     Brave/Chromium apliquen su "forzar modo oscuro" por encima */
  color-scheme: light;

  /* Superficies */
  --bg:        #f5f6fa;
  --surface:   #ffffff;
  --surface-2: #eef0f7;

  /* Texto */
  --ink:       #1e2433;
  --ink-2:     #4b5568;
  --ink-3:     #7c8499;

  /* Marca */
  --brand:        #4f46e5;
  --brand-2:      #7c3aed;
  --brand-soft:   rgba(79, 70, 229, .10);
  --brand-grad:   linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);

  /* Acentos funcionales */
  --amber:        #b45309;
  --amber-soft:   #fef3c7;
  --sky:          #0284c7;
  --sky-soft:     #e0f2fe;

  /* Líneas, anillos y sombras */
  --line:         #e2e6f0;
  --line-soft:    rgba(23, 30, 50, .07);
  --ring:         #4f46e5;

  /* Elevación (modo claro: sombras + anillo) */
  --shadow-sm: 0 0 0 1px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 0 0 1px rgba(15, 23, 42, .06), 0 1px 2px -1px rgba(15, 23, 42, .06), 0 6px 16px -4px rgba(15, 23, 42, .10);
  --shadow-modal: 0 24px 64px -12px rgba(15, 23, 42, .28);

  /* Navbar */
  --nav-bg: rgba(255, 255, 255, .82);
  --nav-line: rgba(15, 23, 42, .08);

  /* Timeline (puntos "status LED") */
  --led:       #4f46e5;
  --led-glow:  #7c3aed;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0a0e17;
  --surface:     #111826;
  --surface-2:   #161e31;

  --ink:         #e7ecf5;
  --ink-2:       #aab4c8;
  --ink-3:       #6e7a90;

  --brand:       #22d3ee;
  --brand-2:     #a78bfa;
  --brand-soft:  rgba(34, 211, 238, .12);
  --brand-grad:  linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);

  --amber:       #fbbf24;
  --amber-soft:  rgba(251, 191, 36, .14);
  --sky:         #38bdf8;
  --sky-soft:    rgba(56, 189, 248, .14);

  --line:        rgba(255, 255, 255, .09);
  --line-soft:   rgba(255, 255, 255, .07);
  --ring:        rgba(34, 211, 238, .75);

  /* El oscuro usa anillos, no sombras profundas */
  --shadow-sm:   0 0 0 1px rgba(255, 255, 255, .08);
  --shadow-md:   0 0 0 1px rgba(255, 255, 255, .08), 0 8px 20px -8px rgba(0, 0, 0, .55);
  --shadow-modal: 0 24px 64px -12px rgba(0, 0, 0, .7);

  --nav-bg: rgba(10, 14, 23, .78);
  --nav-line: rgba(255, 255, 255, .08);

  --led:       #22d3ee;
  --led-glow:  #a78bfa;
}

/* Compatibilidad con el CSS legado (se elimina progresivamente) */
:root {
  --background-color: var(--bg);
  --background-secondary: var(--brand-2);
  --background-top-bar: var(--nav-bg);
  --background-widgets-color2: var(--surface);
  --text-color: var(--ink);
  --title-color: var(--brand);
  --color-borders: var(--line);
  --color-borders-secondary: var(--surface-2);
}