/* Tema base */
:root {
  --bg-color: hsla(210,100%,80%,0.5);
  --bg-image: url('/assets/bg/bg1.gif');
  --bg-size: auto;
  --bg-pos: auto;
  --bg-repeat: repeat;
  --text-color: #333;
  --accent-color: #004d99;
  --accent-color-2: #6699cc;
  --font-family: Verdana;
  --font-size: 11pt;
  --div-border: solid 1px #666;
  --div-bg: rgba(255,255,255,0.75);
  --div-shadow: none;
  --div-corner: 0px;
  --div-padding: 15px;
  --div-margin: 15px;
  --inner-bg: #fff;
  --transition-time: 0.3s;
  --link-glow: none;
}

/* Tema escuro (dark) */
body.dark {
  --bg-color: #222;
  --bg-image: none;
  --bg-size: cover;
  --bg-pos: center;
  --bg-repeat: no-repeat;
  --text-color: #ddd;
  --accent-color: #3399ff;
  --accent-color-2: #99ccff;
  --font-family: Verdana;
  --font-size: 11pt;
  --div-border: solid 1px #000;
  --div-bg: #333;
  --div-shadow: none;
  --div-corner: 0px;
  --div-padding: 15px;
  --div-margin: 15px;
  --inner-bg: #444;
  --transition-time: 0.3s;
  --link-glow: var(--accent-color) 0 0 5px;
}

/* Tema Vaporwave */
body.vapor {
  /* Fundo geral */
  --bg-color: none;
  --bg-image: linear-gradient(135deg, hsla(195, 50%, 20%, 1), hsla(270, 50%, 20%, 1), hsla(330, 50%, 20%, 1));
  --bg-size: cover;
  --bg-pos: center;
  --bg-repeat: no-repeat;

  /* Texto */
  --text-color: #d8d8e8;

  /* Links */
  --accent-color: #f5b;   /* rosa vapor */
  --accent-color-2: #4ee; /* ciano hover */

  /* Fonte */
  --font-family: "MS UI Gothic", Verdana, sans-serif;
  --font-size: 13pt;

  /* Caixas */
  --div-border: 1px solid #f5b5;
  --div-bg: rgba(10, 10, 25, 0.75);
  --inner-bg: rgba(20, 20, 40, 0.9);

  /* Estética */
  --div-shadow: none;
  --div-corner: 6px;

  /* Espaçamento */
  --div-padding: 15px;
  --div-margin: 15px;

  /* Transições */
  --transition-time: 0.3s;

  /* Glow de link */
  --link-glow: #f00 -1px 0 1px, #0ff 1px 0 1px, 0 0 6px rgba(255,110,199,0.6);
}

/* Estática de VHS */
body.vapor::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('/assets/bg/vhs-noise.gif');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  opacity: 0.1;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: screen;
  display: none;
}

body.vapor a {
  text-shadow: #f000 -10px 0 4px, #0ff0 10px 0 4px;
  transition: var(--transition-time);
}

body.vapor a:hover {
  text-shadow: var(--link-glow);
  transition: var(--transition-time);
}

body.vapor #vhs-clock {
  display: block;
}