/* ==========================================================================
   Tokens de diseño
   --------------------------------------------------------------------------
   Solo modo oscuro: fondo casi negro neutro (base de StrangerTools sin el tinte
   azul). El color de acento lo elige cada usuario en el menú de configuración:
   html[data-accent="magenta" | "green" | "gold"], dorado por defecto.
   El script en línea de base.html pone data-theme y data-accent antes de pintar.
   main.css, theme-overrides.css y pages/*.css usan estas variables (--c-*)
   en lugar de colores fijos.
   ========================================================================== */

html[data-theme] {
  color-scheme: dark;

  /* Fondo */
  --c-bg: #08090a;

  /* Superficies */
  --c-surface: #131415;
  --c-surface-hi: #1a1b1d;
  --c-glass: rgba(19, 20, 21, .8);
  --c-inset: #1a1b1d;
  --c-inset-2: #222326;
  --c-field: #0e0f10;

  /* Líneas */
  --c-line: #232427;
  --c-line-strong: #2f3034;
  --c-line-hover: #404146;

  /* Texto */
  --c-text: #e8e8e6;
  --c-text-2: #929390;
  --c-text-3: #6b6c6a;

  /* Estados (independientes del acento: Tengo siempre verde, Tradeo azul…) */
  --c-green: #8fd16a;
  --c-blue: #7fa8f5;
  --c-red: #ef8a7a;
  --c-warn: #e5c06b;
  --c-tint-green: #19230f;
  --c-tint-blue: #161c27;
  --c-tint-red: #261818;

  /* Elevación */
  --c-shadow: 0 16px 40px -16px rgba(0, 0, 0, .8);
  --c-shadow-hover: 0 22px 48px -18px rgba(0, 0, 0, .9), 0 0 0 1px var(--c-line-hover);
  --c-shadow-float: 0 30px 80px rgba(0, 0, 0, .6), 0 0 40px var(--c-accent-soft);

  /* Barra superior */
  --c-nav: rgba(8, 9, 10, .74);
  --c-nav-text: #a9aaa7;

  /* Acento derivado de --accent-rgb (lo fija cada data-accent de abajo) */
  --c-accent: rgb(var(--accent-rgb));
  --c-accent-ink: rgb(var(--accent-rgb));
  --c-accent-soft: rgba(var(--accent-rgb), .13);
  --c-accent-glow: rgba(var(--accent-rgb), .38);
  --c-line-accent: rgba(var(--accent-rgb), .45);
}

/* --------------------------------------------------------------------------
   Colores de acento (menú de configuración → Color del sitio)
   --accent-rgb también lo lee sky.js para teñir estrellas y luciérnagas.
   -------------------------------------------------------------------------- */
/* Por defecto (dorado); va primero para que cada data-accent de abajo lo reemplace */
html[data-theme] {
  --accent-rgb: 227, 181, 79;
  --c-accent-2: #f0c96c;
  --c-on-accent: #241700;
}
html[data-accent="magenta"] {
  --accent-rgb: 232, 92, 176;
  --c-accent-2: #f07fc4;
  --c-on-accent: #2b0719;
}
html[data-accent="green"] {
  --accent-rgb: 184, 226, 106;
  --c-accent-2: #c6ea84;
  --c-on-accent: #18200b;
}
html[data-accent="gold"] {
  --accent-rgb: 227, 181, 79;
  --c-accent-2: #f0c96c;
  --c-on-accent: #241700;
}

/* Tokens comunes + variables antiguas del sitio apuntando a las nuevas.
   En :root para que existan aunque el script de tema aún no haya corrido. */
:root {
  --r-card: 16px;
  --r-inner: 10px;
  --r-ctl: 7px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font-ui: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-display: 'Cinzel', Georgia, serif;
  --nav-h: 60px;

  --bg: var(--c-bg);
  --bg2: var(--c-field);
  --surface: var(--c-surface);
  --surface2: var(--c-inset);
  --surface3: var(--c-inset-2);
  --border: var(--c-line-strong);
  --border-gold: var(--c-line-accent);
  --text: var(--c-text);
  --text-muted: var(--c-text-2);
  --muted: var(--c-text-2);
  --text-dim: var(--c-text-3);
  --gold: var(--c-accent-ink);
  --gold-dark: var(--c-accent-ink);
  --gold-light: var(--c-accent-2);
  --gold-dim: var(--c-accent-soft);
  --amber: var(--c-accent);
  --green: var(--c-green);
  --green-light: var(--c-green);
  --red: var(--c-red);
  --red-light: var(--c-red);
  --blue: var(--c-blue);
  --blue-light: var(--c-blue);
  --radius: 10px;
}