/* ==========================================================================
   TOKENS DE DISEÑO — MUSTTELA
   ==========================================================================
   Variables de color y tipografía usadas en TODO el sitio (fuera de la
   página de proyecto "Sombra", que de momento mantiene su propia paleta
   aislada en sombra.css — ver la auditoría, punto 4.2).

   Este archivo debe cargarse ANTES que cualquier otro CSS del theme.
   No cambia nada visualmente por sí solo: solo centraliza los valores
   que antes estaban repetidos como hex sueltos en 5 archivos distintos.

   Para retocar la paleta en el futuro, se cambia AQUÍ y se propaga solo.
   ========================================================================== */

:root {
  /* Colores base — "pantallazo azul" */
  --blue:   #0000aa;  /* fondo general del sitio */
  --fg:     #edd461;  /* texto principal / ámbar, el color "de marca" */
  --fg-dim: #ada372;  /* texto secundario, bordes, separadores */
  --panel:  #313143;  /* fondo de header, footer y bloques tipo "code" */
  --muted:  #6e6b62;  /* gris de botones en reposo */
  --hover:  #717198;  /* hover de botones, scrollbar */
  --white:  #ffffff;

  /* Enlaces dentro de cuerpos de texto de proyecto (project-body) —
     se mantienen aparte del resto de enlaces porque usan un cian que
     no pertenece a la paleta ámbar/azul principal. Si en algún momento
     quieres que sigan la paleta general, cambia estas dos líneas por
     var(--fg-dim) y var(--fg). */
  --link-body:       #7fdbff;
  --link-body-hover: #39cccc;

  /* Tipografía */
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --display: 'VT323', monospace;

  /* Escala de breakpoints — usar SIEMPRE estos 3 valores en media queries
     nuevas (no se pueden usar dentro de @media directamente en CSS puro,
     son de referencia para mantener consistencia; ver auditoría punto 5) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}