/* ==========================================================================
   TOKENS DE MARCA  ·  TewNologic
   Aquí vive TODA la identidad visual. Cambia un valor y se actualiza en
   las dos variantes del sitio.
   ========================================================================== */

:root {
  /* --- Colores de marca (manual de identidad) --- */
  --brand-blue: #176BFF;       /* Azul eléctrico */
  --brand-black: #080B12;      /* Negro profundo */
  --brand-white: #FFFFFF;      /* Blanco puro */
  --brand-blue-soft: #4D8DFF;  /* Azul claro para texto sobre fondo oscuro */
  --brand-blue-deep: #0A3AA8;  /* Azul profundo para sombras de las facetas */

  /* --- Tipografías ---
     Century Gothic se usa si está instalada en el equipo del visitante.
     Si no, entra Outfit (Google Fonts), muy parecida.
     Para usar Century Gothic siempre: guarda los archivos en assets/fonts/
     y descomenta el bloque @font-face de abajo. */
  --font-display: 'Century Gothic', 'CenturyGothic', 'Outfit', system-ui, sans-serif;
  --font-body: 'Century Gothic', 'CenturyGothic', 'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* --- Layout --- */
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 14px;
}

/*
@font-face {
  font-family: 'Century Gothic';
  src: url('../fonts/CenturyGothic-Regular.woff2') format('woff2');
  font-weight: 300 400;
  font-display: swap;
}
@font-face {
  font-family: 'Century Gothic';
  src: url('../fonts/CenturyGothic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
*/

/* ==========================================================================
   TEMAS  ·  Se activan con el atributo data-tema en <html> o en cualquier
   sección (por ejemplo <section data-tema="oscuro">).
   ========================================================================== */

:root,
[data-tema="oscuro"] {
  --bg: #080B12;
  --surface: #0E131E;
  --surface-2: #131A28;
  --line: #1C2538;
  --fg: #FFFFFF;
  --muted: #93A0B8;
  --accent: var(--brand-blue);
  --accent-soft: var(--brand-blue-soft);
  --accent-glow: rgba(23, 107, 255, .35);
  --on-accent: #FFFFFF;
  color-scheme: dark;
}

[data-tema="claro"] {
  --bg: #FFFFFF;
  --surface: #F4F7FC;
  --surface-2: #EAF0FA;
  --line: #D9E1F0;
  --fg: #080B12;
  --muted: #55627C;
  --accent: var(--brand-blue);
  --accent-soft: var(--brand-blue);
  --accent-glow: rgba(23, 107, 255, .22);
  --on-accent: #FFFFFF;
  color-scheme: light;
}