/* ============================================================
   theme.css — Paleta única de TODO el proyecto (portfolio + demos).
   Única fuente de verdad para el color. Para recolorar todo, se tocan
   solo estas variables.

   Marca: exactamente 3 colores + grises/sombras derivados.
     1. Blanco   #FFFFFF
     2. Burdeos  #6D001A
     3. Negro    #000000

   Los archivos de tokens de cada demo (accesos .../tokens.css,
   gestion .../assets/css/theme.css) y el portfolio (index.html)
   mapean SUS nombres de variable a estas. No definir hex de marca
   fuera de este archivo.
   ============================================================ */
:root {
  /* Los 3 colores */
  --c-white: #FFFFFF;
  --c-brand: #6D001A;
  --c-black: #000000;

  /* Derivados de la marca (tintes y sombras del mismo burdeos) */
  --c-brand-dark: #4A0012;   /* hover / estados presionados */
  --c-brand-soft: #C98D98;   /* acento claro, bordes activos */
  --c-brand-tint: #F3E6E9;   /* fondos suaves con tono de marca */

  /* Escala de grises (del negro al blanco) */
  --c-g-950: #121212;
  --c-g-800: #2B2B2B;
  --c-g-700: #3D3D3D;
  --c-g-600: #555555;
  --c-g-500: #6E6E6E;
  --c-g-400: #9A9A9A;
  --c-g-300: #CFCFCF;
  --c-g-200: #E6E6E6;
  --c-g-100: #F2F2F2;
  --c-g-50:  #F7F7F7;

  /* Estructura */
  --c-line: rgba(0, 0, 0, .12);
  --c-shadow: rgba(0, 0, 0, .16);
  --c-focus: rgba(109, 0, 26, .25);
}