/* ============================================================
   LUISA GRAJALES — COLOR SYSTEM · "El Vacío"
   Cada color tiene un rol exacto. Ninguno se usa decorativamente.
   Verde = estructura. Bronce = valor. Marfil = vacío. Negro = hechos.
   ============================================================ */

:root {
  /* — Paleta principal · cuatro colores fundamentales — */
  --verde-petroleo: #1F3A36;   /* Principal · estructura · autoridad */
  --bronce-ejecutivo: #967142; /* Acento · valor premium · resultado */
  --marfil: #F7F4EF;           /* Fondo · el vacío · el espacio */
  --negro-absoluto: #111111;   /* Texto · hechos · realidad */

  /* — Paleta secundaria · variaciones y apoyo — */
  --verde-medio: #2D5248;      /* Hover · capas */
  --bronce-claro: #C4A46B;     /* Líneas · filigrana */
  --marfil-oscuro: #E3DDD4;    /* Divisores · fondos */
  --gris-ejecutivo: #6E6E6E;   /* Texto secundario */

  /* — Extensiones tonales (derivadas, para estados e interfaz) — */
  --verde-profundo: #16292655; /* sombras de verde, overlays */
  --verde-petroleo-90: #1F3A36E6;
  --marfil-puro: #FFFFFF;
  --bronce-tenue: #9671421A;   /* fondos sutiles de acento */
  --verde-tenue: #1F3A360D;    /* tintes de superficie */

  /* ========================================================
     ALIASES SEMÁNTICOS
     Usar estos en componentes — nunca los crudos directamente.
     ======================================================== */

  /* Superficies */
  --surface-page: var(--marfil);          /* fondo por defecto, "el vacío" */
  --surface-raised: var(--marfil-puro);   /* tarjetas sobre marfil */
  --surface-sunken: var(--marfil-oscuro); /* fondos hundidos, divisorios */
  --surface-authority: var(--verde-petroleo); /* secciones de alto impacto */
  --surface-authority-2: var(--verde-medio);  /* capas sobre verde */

  /* Texto */
  --text-body: var(--negro-absoluto);     /* cuerpo, los hechos */
  --text-muted: var(--gris-ejecutivo);    /* secundario */
  --text-on-dark: var(--marfil);          /* sobre verde / negro */
  --text-on-dark-muted: #B9C2BE;          /* secundario sobre verde */
  --text-accent: var(--bronce-ejecutivo); /* el punto de valor */

  /* Bordes y líneas */
  --line-hairline: var(--marfil-oscuro);  /* divisores sobre claro */
  --line-accent: var(--bronce-claro);     /* filigrana de bronce */
  --line-on-dark: #3A554F;                /* divisores sobre verde */

  /* Acento / interacción */
  --accent: var(--bronce-ejecutivo);
  --accent-hover: #7E5F37;                /* bronce presionado */
  --accent-soft: var(--bronce-claro);
}