/* PROFEC — Color (Manual de identidad, Sección 10)
   Paleta de 9 colores. Proporción sugerida:
   60% oscuros (carbón/navy) · 25% blanco hueso · 10% brasa · 5% ámbar/grises.
   Reglas: brasa es acento, nunca fondo. Nunca naranja plano sobre blanco.
   Gradiente permitido solo brasa→ámbar a 24°, con moderación. */

:root {
  /* Colores de marca */
  --color-carbon: #1A1A1D;      /* Negro carbón — fondo dominante */
  --color-navy: #041E37;        /* Azul marino — fondo institucional B2B */
  --color-brasa: #E2571F;       /* Naranja brasa — acento principal */
  --color-ambar: #C7410E;       /* Ámbar profundo — sombra · gradiente */

  /* Escala de grises (matiz frío) */
  --color-grafito: #3A3D42;     /* Texto sobre claro · líneas */
  --color-humo: #6B6E75;        /* Texto secundario */
  --color-acero: #9BA0A8;       /* Subtítulos · íconos inactivos */
  --color-niebla: #CDD1D6;      /* Líneas · bordes · fondos tabla */
  --color-hueso: #F2EFEA;       /* Fondos claros · papelería */
  --color-blanco: #FFFFFF;

  /* Derivados (mezclas de la propia paleta, para UI) */
  --color-navy-800: #0A2A47;    /* navy elevado (tarjetas sobre navy) */
  --color-carbon-800: #232327;  /* carbón elevado */
  --color-brasa-hover: #C94E1C; /* brasa presionado/hover (hacia ámbar) */
  --color-brasa-soft: rgba(226, 87, 31, 0.12); /* velo brasa para fondos de estado */
  --color-hueso-dim: #E9E5DE;   /* hueso oscurecido (hover sobre claro) */

  /* Gradiente de marca — único permitido, usar con moderación */
  --gradient-brasa: linear-gradient(24deg, var(--color-ambar), var(--color-brasa));

  /* Semánticos — superficie */
  --surface-page: var(--color-hueso);         /* páginas y documentos */
  --surface-dark: var(--color-carbon);        /* fondo dominante */
  --surface-institutional: var(--color-navy); /* fondo corporativo B2B */
  --surface-card: var(--color-blanco);
  --surface-card-dark: var(--color-carbon-800);
  --surface-card-navy: var(--color-navy-800);
  --surface-table-row: var(--color-niebla);

  /* Semánticos — texto */
  --text-strong: var(--color-carbon);   /* titulares sobre claro */
  --text-body: var(--color-grafito);    /* cuerpo sobre claro */
  --text-secondary: var(--color-humo);
  --text-subtle: var(--color-acero);
  --text-on-dark: var(--color-hueso);   /* cuerpo sobre oscuro */
  --text-on-dark-strong: var(--color-blanco);
  --text-on-dark-secondary: var(--color-acero);
  --text-accent: var(--color-brasa);
  --text-on-accent: var(--color-blanco);

  /* Semánticos — interacción */
  --accent: var(--color-brasa);
  --accent-hover: var(--color-brasa-hover);
  --accent-pressed: var(--color-ambar);
  --focus-ring: rgba(226, 87, 31, 0.45);

  /* Semánticos — líneas y bordes */
  --border-default: var(--color-niebla);
  --border-strong: var(--color-acero);
  --border-on-dark: rgba(242, 239, 234, 0.16);

  /* Estado (derivados sobrios; sin verde/rojo ajenos a la paleta se
     usan brasa/ámbar para alerta y grises para neutro) */
  --state-alert: var(--color-ambar);
  --state-alert-bg: var(--color-brasa-soft);
}