/* Bitshard: colores del logo (azul marino #0a1b63, azul #016ae0, cian #0ca6ce, violeta #5e45e3).
   Se carga después de style.css y solo redefine colores. */

:root {
  --brand: #1666e0;
  --brand-strong: #1450c8;
  --brand-soft: rgba(22, 102, 224, 0.10);
  --bg: #ffffff;
  --bg-alt: #f3f6fc;
  --surface: #ffffff;
  --border: #dde3f0;
  --text: #0a1433;
  --text-muted: #4a5578;
  --code-bg: #060b1f;
  --code-text: #e6ecff;
  --code-dim: #8a96bd;
  --shadow: 0 1px 2px rgba(10, 20, 51, 0.06), 0 8px 24px rgba(10, 20, 51, 0.07);
  --btn-bg: #1666e0;
  --btn-bg-hover: #1b74f5;
  --gradient: linear-gradient(90deg, #0ab4e6 0%, #1666e0 55%, #5e45e3 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #3d8bff;
    --brand-strong: #7fb2ff;
    --brand-soft: rgba(61, 139, 255, 0.16);
    --bg: #070c24;
    --bg-alt: #0b1333;
    --surface: #101a40;
    --border: #1e2a57;
    --text: #eef2ff;
    --text-muted: #a8b3d6;
    --code-bg: #050a1c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --gradient: linear-gradient(90deg, #2ad4f0 0%, #4d94ff 55%, #8b7bff 100%);
  }
}

:root[data-theme="dark"] {
  --brand: #3d8bff;
  --brand-strong: #7fb2ff;
  --brand-soft: rgba(61, 139, 255, 0.16);
  --bg: #070c24;
  --bg-alt: #0b1333;
  --surface: #101a40;
  --border: #1e2a57;
  --text: #eef2ff;
  --text-muted: #a8b3d6;
  --code-bg: #050a1c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --gradient: linear-gradient(90deg, #2ad4f0 0%, #4d94ff 55%, #8b7bff 100%);
}

/* Logo: imagen de la marca en lugar del cubo de la marca original */
.logo img { width: 30px; height: 30px; display: block; }

/* Botón principal: texto blanco sobre azul (contraste 5,2:1) en los dos temas */
.btn-primary { background: var(--btn-bg); color: #ffffff !important; }
.btn-primary:hover { background: var(--btn-bg-hover); }
.plan .badge { background: var(--btn-bg); color: #ffffff; }

/* Titular con el degradado del logo (cian, azul, violeta) */
.hero h1 em {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero::before { background: radial-gradient(closest-side, rgba(10, 180, 230, 0.14), transparent); }
.stat strong { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.duo-card { border-top-color: var(--brand); }

/* Terminal en azul marino */
.terminal { border-color: #1c2a5c; box-shadow: 0 20px 60px rgba(6, 11, 31, 0.35); }
.terminal-bar { border-bottom-color: #1c2a5c; }
.terminal-bar i { background: #24346b; }
.t-brand { color: #2ad4f0; }
.t-key { color: #9ec5ff; }